The successor to the older AngularJS web framework, now simply known as “Angular”. Angular takes a web component-based approach to build powerful applications for the web. It is used along with TypeScript which provides support for both older and new versions of JavaScript.
This article shows how to create a Reactive Angular form with email validation. 1. Add required Angular modules into app.module Import ReactiveFormsModule & BrowserModule in app.module.ts app/app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule,... » read more
To define constants which are globally available in your Angular app, here is my suggested way to do so. Create a TypeScript file to declare Global Constants Create a TypeScript file and name it e.g. globals.ts. Inside the file, create const and assign value to each const. With const, it prevents re-assignment to a variable.... » read more
I tried to put 2 structural directives on the same element, but to no avail, this causes an exception: app/app.component.ts (Excerpt) <select [(ngModel)]="task" class="form-control"> <option *ngIf="showTough || t.level !== 'tough'" *ngFor="let t of tasks" [ngValue]="t">{{t.name}} ({{t.level}})</option> </select> In this circumstances, ng-container can solve this problem by separating 2 structural directives into different places. app/app.component.ts (Excerpt)... » read more
First, assign a reference variable i.e. #companyname to the HTML element as followings <input class="form-control" #companyname placeholder="Enter a Name"> Second, in the Component where you want to access the DOM, use @ViewChild together with the reference variable to access the DOM. @ViewChild('companyname') The above-mentioned @ViewChild('companyname') is a decorator to a variable of the Component. The... » read more
Observable is not part of Angular but RxJS. RxJS is installed together with Angular. Promise is part of ES2015. Both Observable and Promise pretty much serve the same purpose, which is for asynchronous operation, such as return response from an asynchronous call. # Observables Promise 1 Handle multiple events at a time Handles a single... » read more
This article shows how to create a Template-driven Angular form with email validation. 1. Add required Angular modules into app.module Import FormsModule & BrowserModule in app.module.ts app/app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule,... » read more
This post is based on Angular CLI generated project. Click here for more info about Angular CLI generated project. 1. Angular CLI provides a command i.e.ng generate service [name] to generate Angular Service. In src\app run following command ng generate service user\user After the command is executed, a new directory i.e. user is created together... » read more
TypeScript constructor and Angular ngOnInit look pretty much the same, but they have differences. 1. Injecting and Consuming Service Use constructor for injecting dependencies into the class. This is because of the execution of constructor always comes before ngOnInit. app/user/user.service.ts import { Injectable } from '@angular/core'; @Injectable() export class UserService{ getUsers(): Array<any>{ return [{ name... » read more