Angular 4: how can I bind dynamically input attribute of subcomponent

Question

How can I set dynamically the input attribute of my subcomponent with one way binding in angular 4?

For example I have following subcomponent:

@Component({
    selector: 'app-page-header',
    templateUrl: './page-header.component.html',
    styleUrls: ['./page-header.component.scss']
})
export class PageHeaderComponent {
    @Input() heading: string;
}

If I am using this subcomponent in my component as follows it works:

<app-page-header [heading]="'Hello world'"></app-page-header>

But I want dynamically set the heading attribute of my subcomponent like this

<app-page-header [heading]="{{myfield}}"></app-page-header>

or even with pipes

<app-page-header [heading]="{{ 'MY_TEXT_FIELD' | translate:lang }}"></app-page-header>

But it does not work.

How can I achieve this and how is the syntax? Thank you in advance for your answers.

Markus Ende · Accepted Answer · 2017-12-01 09:36:31Z

2

Just remove the {{}}.

So it should be:

<app-page-header [heading]="myfield"></app-page-header>

and

<app-page-header [heading]="'MY_TEXT_FIELD' | translate:lang"></app-page-header>

You can look that up in the 'Template syntax' section of the Angular.io Cheatsheet.

edited Dec 1, 2017 at 9:36

answered Dec 1, 2017 at 9:30

Markus Ende

8501 gold badge9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Markus Ende Over a year ago

Glad I could help!

Collectives™ on Stack Overflow

Angular 4: how can I bind dynamically input attribute of subcomponent

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related