Tutorial by Examples

To create a component we add @Component decorator in a class passing some parameters: providers: Resources that will be injected into the component constructor selector: The query selector that will find the element in the HTML and replace by the component styles: Inline styles. NOTE: DO NOT us...

Templates are HTML files that may contain logic. You can specify a template in two ways: Passing template as a file path @Component({ templateUrl: 'hero.component.html', }) Passing a template as an inline code @Component({ template: `<div>My template here</div>`, }) Tem...

hero.component.html <form (ngSubmit)="submit($event)" [formGroup]="form" novalidate> <input type="text" formControlName="name" /> <button type="submit">Show hero name</button> </form> hero.component.ts import...

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 RequiredC...