CloudBerry

Effective Programming

Git – How to Delete Local and Remote Branch

Delete a local branch A local branch is a branch which is the one inside the computer. To delete a local branch, execute following git command. Replace the branch_name with the one that you want to remove in your local computer. git branch -d branch_name To force delete a local branch, replace -d with -D,... » read more

Angular – Reactive Forms Validation

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

Angular – Define Global Constants

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

Angular – Two Structural Directives on the same DOM element

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

Angular – Get Hold with DOM Element

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

Angular – Observables vs Promise

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

Angular – Template-Driven Forms Validation

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

Angular – Angular Service with Angular CLI

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