Hello World!

To use Angular animations, it must be installed from NPM. @angular/animations It is then imported in the AppModule as import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’; The animations can now be called inside any component. It is defined inside the component’s decorator underneath the “animations” property. import { Component } from ‘@angular/core’; import { trigger,state,style,transition,animate,keyframes } […]

Directives are attributes that are placed inside DOM elements or inside of a component. For example: <app-org-chart myDirective></app-org-chart> A class is declared as a directive by using the @Directive decorator. The selector is usually set as “[appDefault]”. A directive (or any class) can access the DOM by using the ElementRef service. This needs to be […]

Client-side routing (all done on the client through angular’s routing engine). The index.html must have the <base> element <!doctype html> <html> <head> <metacharset=”utf-8″> <title>Myquickstart</title> <base href=”/”> <metaname=”viewport”content=”width=device-width, initial-scale=1″> <linkrel=”icon”type=”image/x-icon”href=”favicon.ico”> </head> <body> <app-root>Loading…</app-root> </body> </html> The <base> element is recognized by the router and instructs how to compose navigation URLs. The app.module.ts file must have the […]

The HttpModule is Angular’s built-in module for working with HTTP requests/responses. This needs to be imported in the module that will contain the service making the calls. import { BrowserModule } from ‘@angular/platform-browser’; import { NgModule } from ‘@angular/core’; import { FormsModule } from ‘@angular/forms’; import { HttpModule } from ‘@angular/http’; import { AppComponent } […]

We provide services so that the dependency injection can inject them when needed. By best practice, we name services to be provided with the word “Service”, ex SalaryService. A service is simply a class. Note that services have the “@Injectable” decorator. import { Injectable } from ‘@angular/core’; @Injectable() export class SalaryService { getSalaries() { return […]

Components contain metadata at the top and exported classed on the bottom. Example: @Component({   selector: ‘app-root’,   template: ‘<app-position></app-position>’,   styleUrls: [‘./app.component.css’] }) export class AppComponent {   private jobPosition = “CEO”;   hidePosition = false;   getData() {     return this.jobPosition;   } } Selectors The selector defines how a component is added […]

A module is the bucket that contains the basic building blocks (components, services, etc) of an angular application. Every Angular application must have at least one module. Best practice says we define this as app.module. A module has the following key items defined within it. Declarations – list of components/directives/pipes that included in this module […]