-// 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
+ * FORMS
+ * https://angular.io/guide/forms
* ******************************************************************************************* */
+
import { FormsModule } from '@angular/forms';
-//
// Provides two-way data-binding, parsing, and validation for form controls.
+//
+
/* *******************************************************************************************
- * Class decorators
+ * CLASS DECORATORS
* ******************************************************************************************* */
+
import { Directive, ... } from '@angular/core';
+// Declares that a class is a component and provides metadata about the component.
@Component({...})
class MyComponent() {}
-// Declares that a class is a component and provides metadata about the component.
+// Declares that a class is a directive and provides metadata about the directive.
@Directive({...})
class MyDirective() {}
-// Declares that a class is a directive and provides metadata about the directive.
+// Declares that a class is a pipe and provides metadata about the pipe.
@Pipe({...})
class MyPipe() {}
-// Declares that a class is a pipe and provides metadata about the pipe.
+// Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
@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 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().
+selector: '.cool-button:not(a)'
// Does not support parent-child relationship selectors.
-providers: [MyService, { provide: ... }]
// List of dependency injection providers for this directive and its children.
+providers: [MyService, { provide: ... }]
+
/* *******************************************************************************************
- * Component configuration
+ * COMPONENT CONFIGURATION
+ * https://angular.io/api/core/Component
* ******************************************************************************************* */
+
@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.
+moduleId: module.id
-viewProviders: [MyService, { provide: ... }]
// List of dependency injection providers scoped to this component's view.
+viewProviders: [MyService, { provide: ... }]
+// Inline template or external template URL of the component's view.
template: 'Hello {{name}}'
templateUrl: 'my-component.html'
-// Inline template or external template URL of the component's view.
+// List of inline CSS styles or external stylesheet URLs for styling 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
+ * 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:
).
+@Input() myProperty;
-@Output() myEvent = new EventEmitter();
// Declares an output property that fires events that you can subscribe to with an event binding (example: ).
+@Output() myEvent = new EventEmitter();
-@HostBinding('class.valid') isValid;
// Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).
+@HostBinding('class.valid') isValid;
-@HostListener('click', ['$event']) onClick(e) {...}
// Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).
+@HostListener('click', ['$event']) onClick(e) {...}
-@ContentChild(myPredicate) myChildComponent;
// Binds the first result of the component content query (myPredicate) to a property (myChildComponent) of the class.
+@ContentChild(myPredicate) myChildComponent;
-@ContentChildren(myPredicate) myChildComponents;
// Binds the results of the component content query (myPredicate) to a property (myChildComponents) of the class.
+@ContentChildren(myPredicate) myChildComponents;
-@ViewChild(myPredicate) myChildComponent;
// Binds the first result of the component view query (myPredicate) to a property (myChildComponent) of the class. Not available for directives.
+@ViewChild(myPredicate) myChildComponent;
-@ViewChildren(myPredicate) myChildComponents;
// Binds the results of the component view query (myPredicate) to a property (myChildComponents) of the class. Not available for directives.
+@ViewChildren(myPredicate) myChildComponents;
+
/* *******************************************************************************************
- * Directive and component change detection and lifecycle hooks
+ * 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.
+constructor(myService: MyService, ...) { ... }
-ngOnChanges(changeRecord) { ... }
// Called after every change to input properties and before processing content or child views.
+ngOnChanges(changeRecord) { ... }
-ngOnInit() { ... }
// Called after the constructor, initializing input properties, and the first call to ngOnChanges.
+ngOnInit() { ... }
-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.
+ngDoCheck() { ... }
-ngAfterContentInit() { ... }
// Called after ngOnInit when the component's or directive's content has been initialized.
+ngAfterContentInit() { ... }
-ngAfterContentChecked() { ... }
// Called after every check of the component's or directive's content.
+ngAfterContentChecked() { ... }
-ngAfterViewInit() { ... }
// Called after ngAfterContentInit when the component's views and child views / the view that a directive is in has been initialized.
+ngAfterViewInit() { ... }
-ngAfterViewChecked() { ... }
// Called after every check of the component's views and child views / the view that a directive is in.
+ngAfterViewChecked() { ... }
-ngOnDestroy() { ... }
// Called once, before the instance is destroyed.
+ngOnDestroy() { ... }
+
/* *******************************************************************************************
- * Dependency injection configuration
+ * DEPENDENCY INJECTION CONFIGURATION
+ * https://angular.io/guide/dependency-injection
* ******************************************************************************************* */
-{ provide: MyService, useClass: MyMockService }
+
// Sets or overrides the provider for MyService to the MyMockService class.
+{ provide: MyService, useClass: MyMockService }
-{ provide: MyService, useFactory: myFactory }
// Sets or overrides the provider for MyService to the myFactory factory function.
+{ provide: MyService, useFactory: myFactory }
-{ provide: MyValue, useValue: 41 }
// Sets or overrides the provider for MyValue to the value 41.
+{ provide: MyValue, useValue: 41 }
+
/* *******************************************************************************************
- * Routing and navigation
+ * ROUTING AND NAVIGATION
+ * https://angular.io/guide/router
* ******************************************************************************************* */
+
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' } }
+ { 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.
+const routing = RouterModule.forRoot(routes);
+// Marks the location to load the component of the active route.
//
//
//
//
//
-// 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.
-//
// 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 { ... }
+ 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.
+{
+ path: ...,
+ canActivate: [CanActivateGuard]
+}
class CanDeactivateGuard implements CanDeactivate {
-canDeactivate(
-component: T,
-route: ActivatedRouteSnapshot,
-state: RouterStateSnapshot
-): Observable|Promise|boolean { ... }
+ 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.
+{
+ path: ...,
+ canDeactivate: [CanDeactivateGuard]
+}
class CanActivateChildGuard implements CanActivateChild {
-canActivateChild(
-route: ActivatedRouteSnapshot,
-state: RouterStateSnapshot
-): Observable|Promise|boolean { ... }
+ 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.
+{
+ path: ...,
+ canActivateChild: [CanActivateGuard],
+ children: ...
+}
class ResolveGuard implements Resolve {
-resolve(
-route: ActivatedRouteSnapshot,
-state: RouterStateSnapshot
-): Observable|Promise|any { ... }
+ 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.
+{
+ path: ...,
+ resolve: [ResolveGuard]
+}
class CanLoadGuard implements CanLoad {
-canLoad(
-route: Route
-): Observable|Promise|boolean { ... }
+ 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.
\ No newline at end of file
+// 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.
+{
+ path: ...,
+ canLoad: [CanLoadGuard],
+ loadChildren: ...
+}