Intro
Components
Modules
Components
Directives
Services
Router
<app-post></app-post>
<app-post *ngFor="let post of posts"></app-post>
<button myCoolButton>Click Me!</button>
<p *ngIf="amIAdmin">Woohoo, I'm an admin!</p>
Component
Service
Backend
Router
Feed page
Profile page
Module
Components
Directives
Services
Router
npm install -g @angular/cli
ng new my-new-app
cd new my-new-app
ng serve
Components are a logical piece of code for Angular application.
It consists of the following:
<Template>
Class {}
@Metadata
$ ng g component components/todo-list
@NgModule({
declarations: [
AppComponent,
--> TodoListComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
@Component({
selector: 'app-todo-list',
templateUrl: './todo-list.component.html',
styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent {
}
Menu
Header
Footer
TODO list
TODO item
App
Menu
TODO list
Header
Footer
TODO item
Bindings
<Template>
Class {}
[property] @Input
(event)
@Output
[ property binding ]
( event binding )
[( two-way binding )]
Service 1
Smart Component
Service 2
Smart Component
Presentational Component
@Input() …
@Output() …
Presentational Component
@Input() …
@Output() …
Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values.
Called before ngOnInit() and whenever one or more data-bound input properties change.
Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.
Called once, after the first ngOnChanges().
Detect and act upon changes that Angular can't or won't detect on its own.
Called during every change detection run, immediately after ngOnChanges() and ngOnInit().
Respond after Angular projects external content into the component's view / the view that a directive is in.
Called once after the first ngDoCheck().
Respond after Angular checks the content projected into the directive/component.
Called after the ngAfterContentInit() and every subsequent ngDoCheck().
Respond after Angular initializes the component's views and child views / the view that a directive is in.
Called once after the first ngAfterContentChecked().
Respond after Angular checks the component's views and child views / the view that a directive is in.
Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked().
Cleanup just before Angular destroys the directive/component. Unsubscribe Observables and detach event handlers to avoid memory leaks.
Called just before Angular destroys the directive/component.
• animations - list of animations of this component
• changeDetection - change detection strategy used by this component
• encapsulation - style encapsulation strategy used by this component
• entryComponents - list of components that are dynamically inserted into the view of this component
• * exportAs - name under which the component instance is exported in a template
• * host - map of class property to host element bindings for events, properties and attributes
• * inputs - list of class property names to data-bind as component inputs
• Interpolation - custom interpolation markers used in this component's template
• moduleId - ES/CommonJS module id of the file in which this component is defined
• * outputs - list of class property names that expose output events that others can subscribe to
• * providers - list of providers available to this component and its children
• * queries - configure queries that can be injected into the component
• * selector -
• styleUrls - list of
component's view
• styles - inline-defined styles to be applied to this component's view
• template - inline-defined template for the view
• templateUrl -
•
* - inherited from Directive