Skip to main content

Angular Basic Syntax

Cheat Sheet


Bootstrapping
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule);
Bootstraps the app, using the root component from the specified NgModule.
NgModules
import { NgModule } from '@angular/core';
@NgModule({ declarations: ..., imports: ...,
exports: ..., providers: ..., bootstrap: ...})
class MyModule {}
Defines a module that contains components, directives, pipes, and providers.
declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]
List of components, directives, and pipes that belong to this module.
imports: [BrowserModule, SomeOtherModule]
List of modules to import into this module. Everything from the imported modules is available to declarations of this module.
exports: [MyRedComponent, MyDatePipe]
List of components, directives, and pipes visible to modules that import this module.
providers: [MyService, { provide: ... }]
List of dependency injection providers visible both to the contents of this module and to importers of this module.
bootstrap: [MyAppComponent]
List of components to bootstrap when this module is bootstrapped.
Template syntax
[value]
="firstName">
Binds property value to the result of expression firstName.

[attr.role]

="myAriaRole">
Binds attribute role to the result of expression myAriaRole.

[class.extra-sparkle]

="isDelightful">
Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful.

[style.width.px]

="mySize">
Binds style property width to the result of expression mySize in pixels. Units are optional.

="readRainbow($event)">
Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object.


Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: 
Hello {{ponyName}}
Binds text content to an interpolated string, for example, "Hello Seabiscuit".
[(title)]
="name">
Sets up two-way data binding. Equivalent to: 

 ...>
="movieplayer.play()">

Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.

*myUnless

="myExpression">...
The * symbol turns the current element into an embedded template. Equivalent to: ...
Card No.: {{cardNumber | myCardNumberFormatter}}
Transforms the current value of expression cardNumber via the pipe called myCardNumberFormatter.
Employer: {{employer?.companyName}}
The safe navigation operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.
<svg:rect x="0" y="0" width="100" height="100"/>
An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG element from an HTML component.
<svg>

</svg>
An  root element is detected as an SVG element automatically, without the prefix.

Built-in directives
import { CommonModule } from '@angular/common';

*ngIf
="showSection">
Removes or recreates a portion of the DOM tree based on the showSection expression.

  • *ngFor


    • ="let item of list">
    Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.


    ="conditionExpression">
    [ngSwitchCase]="case1Exp">...
    ngSwitchCase="case2LiteralString">...
    ngSwitchDefault>...

    Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.

    [ngClass]

    ="{'active': isActive, 'disabled': isDisabled}">
    Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map.

    [ngStyle]

    ="{'property': 'value'}">

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

    Forms
    import { FormsModule } from '@angular/forms';
    [(ngModel)]
    ="userName">
    Provides two-way data-binding, parsing, and validation for form controls.

    Class decorators
    import { Directive, ... } from '@angular/core';
    @Component({...})
    class MyComponent() {}
    Declares that a class is a component and provides metadata about the component.
    @Directive({...})
    class MyDirective() {}
    Declares that a class is a directive and provides metadata about the directive.
    @Pipe({...})
    class MyPipe() {}
    Declares that a class is a pipe and provides metadata about the pipe.
    @Injectable()
    class MyService() {}
    Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
    Directive configuration
    @Directive({ property1: value1, ... })
    selector: '.cool-button:not(a)'
    Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, [attribute], .class, and :not().
    Does not support parent-child relationship selectors.
    providers: [MyService, { provide: ... }]
    List of dependency injection providers for this directive and its children.
    Component configuration
    @Component extends @Directive, so the @Directive configuration applies to components as well
    moduleId: module.id
    If set, the templateUrl and styleUrl are resolved relative to the component.
    viewProviders: [MyService, { provide: ... }]
    List of dependency injection providers scoped to this component's view.
    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']
    List of inline CSS styles or external stylesheet URLs for styling the component’s view.
    Class field decorators for directives and components
    import { Input, ... } from '@angular/core';
    @Input() myProperty;
    Declares an input property that you can update via property binding (example: ).
    @Output() myEvent = new EventEmitter();
    Declares an output property that fires events that you can subscribe to with an event binding (example: ).
    @HostBinding('class.valid') isValid;
    Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).
    @HostListener('click', ['$event']) onClick(e) {...}
    Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).
    @ContentChild(myPredicate) myChildComponent;
    Binds the first result of the component content query (myPredicate) to a property (myChildComponent) of the class.
    @ContentChildren(myPredicate) myChildComponents;
    Binds the results of the component content query (myPredicate) to a property (myChildComponents) of the class.
    @ViewChild(myPredicate) myChildComponent;
    Binds the first result of the component view query (myPredicate) to a property (myChildComponent) of the class. Not available for directives.
    @ViewChildren(myPredicate) myChildComponents;
    Binds the results of the component view query (myPredicate) to a property (myChildComponents) of the class. Not available for directives.
    Directive and component change detection and lifecycle hooks
    (implemented as class methods)
    constructor(myService: MyService, ...) { ... }
    Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
    ngOnChanges(changeRecord) { ... }
    Called after every change to input properties and before processing content or child views.
    ngOnInit() { ... }
    Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    ngDoCheck() { ... }
    Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.
    ngAfterContentInit() { ... }
    Called after ngOnInit when the component's or directive's content has been initialized.
    ngAfterContentChecked() { ... }
    Called after every check of the component's or directive's content.
    ngAfterViewInit() { ... }
    Called after ngAfterContentInit when the component's views and child views / the view that a directive is in has been initialized.
    ngAfterViewChecked() { ... }
    Called after every check of the component's views and child views / the view that a directive is in.
    ngOnDestroy() { ... }
    Called once, before the instance is destroyed.
    Dependency injection configuration
    { provide: MyService, useClass: MyMockService }
    Sets or overrides the provider for MyService to the MyMockServiceclass.
    { provide: MyService, useFactory: myFactory }
    Sets or overrides the provider for MyService to the myFactoryfactory function.
    { provide: MyValue, useValue: 41 }
    Sets or overrides the provider for MyValue to the value 41.
    Routing and navigation
    import { Routes, RouterModule, ... } from '@angular/router';
    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>
    Marks the location to load the component of the active route.

    <a routerLink="/path">
    <a [routerLink]="[ '/path', routeParam ]">
    [routerLink]
    ="[ '/path', { matrixParam: 'value' } ]">
    [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
    [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.
    <a [routerLink]="[ '/path' ]" routerLinkActive="active">
    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|Promise|boolean { ... }
    }

    { 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 or an Observable/Promise that resolves to a boolean.
    class CanDeactivateGuard implements CanDeactivate {
    canDeactivate(
    component: T,
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ): Observable|Promise|boolean { ... }
    }

    { 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 or an Observable/Promise that resolves to a boolean.
    class CanActivateChildGuard implements CanActivateChild {
    canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ): Observable|Promise|boolean { ... }
    }

    { 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 or an Observable/Promise that resolves to a boolean.
    class ResolveGuard implements Resolve {
    resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ): Observable|Promise|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|Promise|boolean { ... }
    }

    { 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 or an Observable/Promise that resolves to a boolean.
    Labels:

    Comments

    Post a Comment