Angular 5 is an upgraded version of angular which is much faster, smaller, and easier to use. Some of its new features are Progressive Web Application Angular Universal State Transfer API and DOM Build Optimizer tool.
Angular 5 supports four types of Data Binding They are
ng serve command is used to run Angular5 application locally during development. To start development server on specific port ng serve -p aPortNumber command is used.
Certain tools are optimized in the new version of Angular, let us see what the tools are:
Components break up the application into smaller parts; whereas, Directives add behavior to an existing DOM element.
Routing helps a user in navigating to different pages using links.
Any activity (button click, mouse click, mouse hover, mouse move, etc) of a user on a frontend/web screen is termed as an event. Such events are passed from the view (.HTML) page to a typescript component (.ts).
Angular5 component is made of a Component decorator and a component definition of a class.
ng generate component component_name command is used to generate a component in Angular5.
Simply use below syntax to import a module in Angular5.
import { ModuleName } from 'someWhere';
In Angular5 $event is a reserved keyword that represents the data emitted by an event (event data).It is
commonly used as a parameter for event based methods.
Double curly brackets like are used form data interpolation in Angular5.
NgModule is a decorator function in Angular that takes a single metadata object whose properties describe the module.
main.ts is the entry point of your application, compiles the application with just-in-time and bootstrap the application.The Bootstrap is the root AppComponent that Angular creates and inserts into the “index.html” host web page.The bootstrapping process creates the components listed in the bootstrap array and inserts each one into the browser (DOM).
| Scaffold | Usage |
|---|---|
| Component | ng g component my-new-component |
| Directive | ng g directive my-new-directive |
| Pipe | ng g pipe my-new-pipe |
| Service | ng g service my-new-service |
| Class | ng g class my-new-class |
| Guard | ng g guard my-new-guard |
| Interface | ng g interface my-new-interface |
| Enum | ng g enum my-new-enum |
| Module | ng g module my-module |
The Angular compiler converts our applications code (TypeScript) into JavaScript code + HTML before browser downloads and runs that code.
The Angular offers two ways to compile our application code-
JIT (Just-in-Time)
AOT (Ahead-of-Time)
Some of the events are applicable for both component/directives while few are specific to components.
Component-specific hooks:
An Observable is like a Stream (in many languages) and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more. With Observable, it doesn’t matter if you want to handle 0, 1, or multiple events. You can utilize the same API in each case. Observable also has the advantage over Promise to be cancelable. If the result of an HTTP request to a server or some other expensive async operation isn’t needed anymore, the Subscription of an Observable allows to cancel the subscription, while a Promise will eventually call the success or failed callback even when you don’t need the notification or the result it provides anymore. Observable provides operators like map, forEach, reduce, … similar to an array. There are also powerful operators like retry(), or replay(), … that are often quite handy.
Promises vs Observables
tsconfig.json file corresponds to the configuration of the TypeScript compiler (tsc).{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
system is for SystemJS, commonjs for CommonJS..d.ts files). With the node approach, they are loaded from the node_modules folder like a module (require('module-name'))system.config.js is the one which allows to load modules(node modules) compiled using the TypeScript compiler.map refers to the name of modules to JS file that contains the JavaScript code.
This is root module that tells Angular how to assemble the application. Every Angular app has a root module class.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
@NgModule — takes a metadata object that tells Angular how to compile and launch the application.
Imports — the BrowserModule that this and every application needs to run in a browser.
Declarations — the application’s component.
Bootstrap — this is the root component tells which component to run first.
@Input decorator binds a property within one component (child component) to receive a value from another component (parent component). This is one-way communication from parent to child. The component property should be annotated with a @Input decorator to act as input property. A component can receive a value from another component using component property binding.It can be annotated at any type of property such as number, string, array or user-defined class. To use an alias for the binding property name we need to assign an alias name as .@Input(alias)
@Output decorator binds a property of a component to send data from one component (child component) to calling component (parent component). This is one-way communication from child to the parent component. @Output binds a property of the type of angular EventEmitter class. This property name becomes custom event name for calling component. @Output the decorator can also alias the property name as @Output(alias) and now this alias name will be used in custom event binding in calling component.
The error in Angular 5 can be handled by