Angular 2 child element attribute not working, use input decorator

When defining a re-usable modal container, I could not get the ‘title’ attribute to appear when set on the parent template’s use of the component.

I was using a modal with a map sibling, as

template: '<div id="map-canvas"></div><modal-container title="Section Notes"></modal-container>'

I figured out the child component needed to use the input decorator on the ‘title’ property. So in modal-container.component.ts, in the export class ModalContainerComponent definition

title: string;

became

@Input() title: string;

and it worked.

See https://angular.io/docs/ts/latest/cookbook/component-communication.html at “Pass data from parent to child with input binding”

Leave a Reply

Your email address will not be published. Required fields are marked *