Angular: Errors with passed @Input values to override button text and add class by using ngClass

Question

I've created an angular component called app-button.

The template looks like this:

<div class="app-button">
    <button class="app-button__btn">{{text}}</button>
</div>

In the controller I have defined two @Input variables called modifier and text:

export class CanButtonComponent implements OnInit {
    @Input() modifier: string;
    @Input() text: string = "Default button";

    ...
}

In the template of a second component called sample-page, I'm reusing my component app-button like this:

<app-button></app-button>

At the moment, I got an HTML button with my default text Default button, so it's working fine.

Now I'm trying to work with my two @Input variables modifier and text.

First of all, I would add a second class, if I pass a value for modifier:

<app-button [modifier]="test"></app-button>

I tried it in two wayes:

1.) add second class directly in template of app-button with ngClass condition:

<div class="app-button" [ngClass]="{'app-button--{{modifier}}' modifier != ''}">...</div>

2.) add second class directly in template of app-button with ngClass calling function in controller:

template:

<div class="app-button" [ngClass]="getModifier()">...</div>

controller:

getModifier() {
    if (this.modifier) {
        return `app-button--${this.modifier}`;
    }
}

Both ideas are not working to add this second class by using the value of the passed modifier string.

Second issue with text

I also have a problem to override the default button text also by passing a value for @Input text:

<app-button [text]="This is a new text">...</app-button>

I've got follow console error:

Uncaught Error: Template parse errors:
Parser Error: Unexpected token 'is' at column 6 in [this is a new text]

Hope my two issues are clear.

Answer 1

When you do the following, you are saying that you are passing the "test" property from the parent component to the child:

<app-button [modifier]="test"></app-button>

If you are trying to pass actual test strings, you should do it like this:

<app-button [modifier]="'test'"></app-button>

And:

<app-button [text]="'This is a new text'">...</app-button>

Answer 2

Maybe this

<div class="app-button {{ modifier!== '' ? 'app-button--' + modifier : ''}}">{{text}}</div>

Then

<app-button [text]="'This is a new text'" [modifier]="'test'" >...</app-button>

Hope this will help!