Angular 2 Components Nesting components
Example
Components will render in their respective selector, so you can use that to nest components.
If you have a component that shows a message:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-required',
template: `{{name}} is required.`
})
export class RequiredComponent {
@Input()
public name: String = '';
}
You can use it inside another component using app-required (this component's selector):
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-sample',
template: `
<input type="text" name="heroName" />
<app-required name="Hero Name"></app-required>
`
})
export class RequiredComponent {
@Input()
public name: String = '';
}
