Cheat Sheet Angular

| 30-04-2021
[RAND-1-100] Comments



  1. Angular Cheat Sheet Pdf
  2. Angular Cheat Sheet Medium
  3. Angularjs Cheat Sheet Pdf
  4. Angular Cheat Sheet Github
AngularOnline cheat sheet makerAngular cheat sheet medium

Interactive cross-site scripting (XSS) cheat sheet for 2021, brought to you by PortSwigger. Actively maintained, and regularly updated with new vectors. Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

Bootstrappingimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule);It bootstraps the application, using the root component from the specified NgModule.
NgModulesimport { NgModule } from '@angular/core';
@NgModule({declarations: [], imports: [], exports: [], providers: [], bootstrap: []});It specifies a module, which contains components, directives, pipes, and providers.
declarations: [MyFirstComponent, MySecondComponent, MyDatePipe]It contains the list of components, directives, and pipes which belong to current module.
imports: [BrowserModule, MyModule]It contains the list of modules to import into current module.
exports: [MyFirstComponent, MyDatePipe]It contains the list of components, directives, and pipes visible to modules that import this module.
providers: [MyFirstService, { provide: ... }]It contains the list of dependency injection providers visible both to the contents of this module and to importers of this module.
entryComponents: [MyFirstComponent, MySecondComponent]It contains the list of components not referenced in any reachable template(i.e. dynamically created from code).
bootstrap: [MyAppComponent]It contains the list of components to bootstrap when this module is bootstrapped.
Class Decoratorsimport { Directive, ... } from '@angular/core';
@Component({...});It will convert class as a component and provides metadata about the component.
@Directive({...});It will convert class as a directive and provides metadata about the directive.
@Pipe({...});It will convert class as a pipe and provides metadata about the pipe.
@Injectable({...});It 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.

new_releases The content of this site is historical. See the announcement for updates.

  • Bootstrapping

  • import 'package:angular/angular.dart';

  • import 'package:angular_app/app_component.template.dart' as ng;
    void main() {
    runApp(ng.AppComponentNgFactory);
    }

  • Launch the app, using AppComponent as the root component.

    See: Architecture Overview,Dependency Injection

  • import 'package:angular_router/angular_router.dart';
    import 'package:angular_tour_of_heroes/app_component.template.dart' as ng;
    import 'main.template.dart' as self;
    @GenerateInjector(
    routerProviders,
    )
    final InjectorFactory injector = self.injector$Injector;
    void main() {
    runApp(ng.AppComponentNgFactory, createInjector: injector);
    }

  • Launch the app, using a compile-time generated root injector.

    See: Architecture Overview,Dependency Injection

Angular Cheat Sheet Pdf

Template syntax
<input [value]='firstName'>

Binds property value to the result of expression firstName.

See: Template Syntax

<div [attr.role]='myAriaRole'>

Binds attribute role to the result of expression myAriaRole.

See: Template Syntax

<div [class.extra-sparkle]='isDelightful'>

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

See: Template Syntax

<div [style.width.px]='mySize'>

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

See: Template Syntax

<button (click)='readRainbow($event)'>

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

See: Template Syntax

<div>

Binds a property to an interpolated string, for example, “Hello Seabiscuit”. Equivalent to: <div [title]='Hello' + ponyName'>

See: Template Syntax

<p>Hello {​{ponyName}}</p>

Binds text content to an interpolated string, for example, “Hello Seabiscuit”.

See: Template Syntax

<my-cmp [(title)]='name'>

Sets up two-way data binding. Equivalent to: <my-cmp [title]='name' (titleChange)='name=$event'>

See: Template Syntax

<video #movieplayer ...>
<button (click)='movieplayer.play()'>
</video>

Creates a local variable movieplayer that provides access to the video element instance in>...</p>

The * symbol turns the current element into an embedded template. Equivalent to: <template [myUnless]='myExpression'><p>...</p></template>

See: Template Syntax

<p>
Card No.: {​{cardNumber | myCardNumberFormatter}}
</p>

Transforms the current value of expression cardNumber via the pipe called myCardNumberFormatter.

See: Template Syntax

<p>
Employer: {​{employer?.companyName}}
</p>

The safe navigation operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.

See: Template Syntax

Angular Cheat Sheet Medium

Core directivesimport 'package:angular/angular.dart'; Available from CORE_DIRECTIVES
<section *ngIf='showSection'>

Removes or recreates a portion of the DOM tree based on the showSection expression.

See: Template Syntax, NgIf class

<li *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.

See: Template Syntax, NgFor class

<div [ngSwitch]='conditionExpression'>
<template [ngSwitchCase]='case1Exp'>...</template>
<template ngSwitchCase='case2LiteralString'>...</template>
<template ngSwitchDefault>...</template>
</div>

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

See: Template Syntax, NgSwitch class, NgSwitchCase class, NgSwitchDefault class

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

See: Template Syntax, NgClass class

Angularjs Cheat Sheet Pdf

Formsimport 'package:angular_forms/angular_forms.dart';
Available from formDirectives
<input [(ngModel)]='userName'>

Provides two-way>).

See: Template Syntax, Input class

final _myEvent = new StreamController<T>();
@Output() Stream<T> get myEvent => _myEvent.stream;

Declares an output property that fires events that you can subscribe to with an event binding (example: <my-cmp (myEvent)='doSomething()'>).

See: Template Syntax, Output class

@HostBinding('class.valid') isValid;

Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).

See: HostBinding class

@HostListener('click', ['$event'])
onClick(e) {...}

Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).

See: Attribute Directives, HostListener class

@ContentChild(myPredicate) myChildComponent;

Binds the first result of the component content query (myPredicate) to a property (myChildComponent) of the class.

See: ContentChild class

@ContentChildren(myPredicate) myChildComponents;

Binds the results of the component content query (myPredicate) to a property (myChildComponents) of the class.

See: ContentChildren 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.

See: ViewChild class

@ViewChildren(myPredicate) myChildComponents;

Binds the results of the component view query (myPredicate) to a property (myChildComponents) of the class. Not available for directives.

See: ViewChildren class

Directive and component change detection and lifecycle hooks (implemented as class methods)
MyAppComponent(MyService myService, ...) { ... }

Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.

See: Lifecycle Hooks

ngOnChanges(changeRecord) { ... }

Called after every change to input properties and before processing content or child views.

See: Lifecycle Hooks,OnChanges class

ngOnInit() { ... }

Called after the constructor, initializing input properties, and the first call to ngOnChanges.

See: Lifecycle Hooks,OnInit class

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.

See: Lifecycle Hooks,DoCheck class

ngAfterContentInit() { ... }

Called after ngOnInit when the component’s or directive’s content has been initialized.

See: Lifecycle Hooks,AfterContentInit class

ngAfterContentChecked() { ... }

Called after every check of the component’s or directive’s content.

See: Lifecycle Hooks,AfterContentChecked class

ngAfterViewInit() { ... }

Called after ngAfterContentInit when the component’s view has been initialized. Applies to components only.

See: Lifecycle Hooks,AfterViewInit class

ngAfterViewChecked() { ... }

Called after every check of the component’s view. Applies to components only.

See: Lifecycle Hooks,AfterViewChecked class

ngOnDestroy() { ... }

Called once, before the instance is destroyed.

See: Lifecycle Hooks,OnDestroy class

Angular Cheat Sheet Github

Dependency injection configurationimport 'package:angular/angular.dart';
Provider(MyService, useClass: MyMockService)

Sets or overrides the provider for MyService to the MyMockService class.

See: Dependency Injection, provide function, Provider class

Provider(MyService, useFactory: myFactory)

Sets or overrides the provider for MyService to the myFactory factory function.

See: Dependency Injection, provide function, Provider class

Provider(MyValue, useValue: 42)

Sets or overrides the provider for MyValue to the value 42.

See: Dependency Injection, provide function, Provider class

Routing and navigationimport 'package:angular_router/angular_router.dart';
new RouteDefinition(
path: 'heroes',
component: HeroesComponentNgFactory,
)

Basic unit used to configure routes.

See: Tutorial: Routing, RouteDefinition class

<router-outlet [routes]='routes'></router-outlet>

Reserves a location in the DOM as an outlet for the router.

See: Tutorial: Routing, RouterOutlet class

<a routerLink='/heroes/{{hero.id}}'>...</a>
<a [routerLink]='heroesRoute'>...</a>

Creates a link to a different view.

See: Tutorial: Routing, RouterLink class