@NgModule({
declarations: ..., imports: ..., exports: ...,
providers: ..., bootstrap: ...
})
class MyModule {}@NgModule({
+ declarations: ..., imports: ..., exports: ...,
+ providers: ..., bootstrap: ...
+})
+class MyModule {}
+Defines a module that contains components, directives, pipes, and providers.
declarations of this module.
Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">
<video #movieplayer ...></video>
<button (click)="movieplayer.play()">Play</button><video #movieplayer ...></video>
+<button (click)="movieplayer.play()">Play</button>
+Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.
declarations of this module.
An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG element from an HTML component.
<svg>
<rect x="0" y="0" width="100" height="100"/>
</svg><svg>
+ <rect x="0" y="0" width="100" height="100"/>
+</svg>
+An <svg> root element is detected as an SVG element automatically, without the prefix.
declarations of this module.
Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.
<div [ngSwitch]="conditionExpression">
<ng-template [ngSwitchCase]="case1Exp">...</ng-template>
<ng-template ngSwitchCase="case2LiteralString">...</ng-template>
<ng-template ngSwitchDefault>...</ng-template>
</div><div [ngSwitch]="conditionExpression">
+ <ng-template [ngSwitchCase]="case1Exp">...</ng-template>
+ <ng-template ngSwitchCase="case2LiteralString">...</ng-template>
+ <ng-template ngSwitchDefault>...</ng-template>
+</div>
+Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.
declarations of this module.
<div [ngStyle]="{'property': 'value'}"><div [ngStyle]="dynamicStyles()"><div [ngStyle]="{'property': 'value'}">
+<div [ngStyle]="dynamicStyles()">
+Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.
declarations of this module.
@Component({...})
class MyComponent() {}@Component({...})
+class MyComponent() {}
+Declares that a class is a component and provides metadata about the component.
@Directive({...})
class MyDirective() {}@Directive({...})
+class MyDirective() {}
+Declares that a class is a directive and provides metadata about the directive.
@Pipe({...})
class MyPipe() {}@Pipe({...})
+class MyPipe() {}
+Declares that a class is a pipe and provides metadata about the pipe.
@Injectable()
class MyService() {}@Injectable()
+class MyService() {}
+Declares that a class can be provided and injected by other classes. Without this decorator, the compiler won't generate enough metadata to allow the class to be created properly when it's injected somewhere.
@Directive configuration applies to components as well
List of dependency injection providers scoped to this component's view.
template: 'Hello {{name}}'
templateUrl: 'my-component.html'template: 'Hello {{name}}'
+templateUrl: 'my-component.html'
+Inline template or external template URL of the component's view.
styles: ['.primary {color: red}']
styleUrls: ['my-component.css']styles: ['.primary {color: red}']
+styleUrls: ['my-component.css']
+List of inline CSS styles or external stylesheet URLs for styling the component’s view.
@Directive configuration applies to components as well
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'path/:routeParam', component: MyComponent },
{ path: 'staticPath', component: ... },
{ path: '**', component: ... },
{ path: 'oldPath', redirectTo: '/staticPath' },
{ path: ..., component: ..., data: { message: 'Custom' } }
]);
const routing = RouterModule.forRoot(routes);const routes: Routes = [
+ { path: '', component: HomeComponent },
+ { path: 'path/:routeParam', component: MyComponent },
+ { path: 'staticPath', component: ... },
+ { path: '**', component: ... },
+ { path: 'oldPath', redirectTo: '/staticPath' },
+ { path: ..., component: ..., data: { message: 'Custom' } }
+]);
+
+const routing = RouterModule.forRoot(routes);
+Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>
<router-outlet></router-outlet>
+<router-outlet name="aux"></router-outlet>
+Marks the location to load the component of the active route.
<a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
<a [routerLink]="[ '/path' ]" fragment="anchor">
<a routerLink="/path">
+<a [routerLink]="[ '/path', routeParam ]">
+<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
+<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
+<a [routerLink]="[ '/path' ]" fragment="anchor">
+Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the / prefix; for a child route, use the ./prefix; for a sibling or parent, use the ../ prefix.
@Directive configuration applies to components as well
The provided classes are added to the element when the routerLink becomes the current active route.
class CanActivateGuard implements CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}
{ path: ..., canActivate: [CanActivateGuard] }class CanActivateGuard implements CanActivate {
+ canActivate(
+ route: ActivatedRouteSnapshot,
+ state: RouterStateSnapshot
+ ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
+}
+
+{ path: ..., canActivate: [CanActivateGuard] }
+An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.
class CanDeactivateGuard implements CanDeactivate<T> {
canDeactivate(
component: T,
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}
{ path: ..., canDeactivate: [CanDeactivateGuard] }class CanDeactivateGuard implements CanDeactivate<T> {
+ canDeactivate(
+ component: T,
+ route: ActivatedRouteSnapshot,
+ state: RouterStateSnapshot
+ ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
+}
+
+{ path: ..., canDeactivate: [CanDeactivateGuard] }
+An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.
class CanActivateChildGuard implements CanActivateChild {
canActivateChild(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}
{ path: ..., canActivateChild: [CanActivateGuard],
children: ... }class CanActivateChildGuard implements CanActivateChild {
+ canActivateChild(
+ route: ActivatedRouteSnapshot,
+ state: RouterStateSnapshot
+ ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
+}
+
+{ path: ..., canActivateChild: [CanActivateGuard],
+ children: ... }
+An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.
class ResolveGuard implements Resolve<T> {
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<any>|Promise<any>|any { ... }
}
{ path: ..., resolve: [ResolveGuard] }class ResolveGuard implements Resolve<T> {
+ resolve(
+ route: ActivatedRouteSnapshot,
+ state: RouterStateSnapshot
+ ): Observable<any>|Promise<any>|any { ... }
+}
+
+{ path: ..., resolve: [ResolveGuard] }
+An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.
class CanLoadGuard implements CanLoad {
canLoad(
route: Route
): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}
{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }class CanLoadGuard implements CanLoad {
+ canLoad(
+ route: Route
+ ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
+}
+
+{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }
+An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.