Skip to main content

angular 6 tutorial for beginners step by step

Angular 6 for beginners

Requisites (Development Environment) :
  1. Node JS - Download and install  (Latest)
  2. Visual Studio Code - download and install
  3. Install Angular CLI (Command Line interface)  using the following command in terminal or command prompt npm i -g @angular/cli refer the below image.

if you did the above three steps your system environment is ready for development.

Requisites (knowledge-based) :

  1. The basic idea about HTML
  2. The basic idea about CSS
  3. Basic knowledge with TypeScript   or we will discuss it 
  4. Chrome browser debugging ( Inspect element option) or we will discuss it 

Create your first project  using ng CLI Command Line interface

  • Open your visual-studio code 
  • To open the integrated terminal  in Vs Code in  view menu click integrated terminal or using the shortcut (Ctrl+`)

Integrated Terminal  ( ctrl+`)

  • navigate to your project directory using  CD (change directory ) command  as below

  • For Creating new angular Project use  NG new <ProjectName>   command  in the Integrated terminal as below, ex : NG new Session1 and press enterhere Session1 is my project name  
  • it will take one to two minutes to create the project 
  • in VsCode  menu File , Open Folder , locate your project directory and open it 

  • you are successfully  created the angular project 
  • use ng serve command to run the project , and view it in the browser 
  • Web server started and it is listening for the URL http://localhost:4200/

  • you can browse it using chrome browser ( recommended) or  any latest browser

congratulation you created an angular  project successfully.

What's new in Angular (Google I/O '18)


Post a Comment

Popular posts from this blog

Angular Material Table Dynamic Columns|Dynamic-columns-mat-table

Dynamic-Columns-Mat-Table Here we have solution for dynamic Mat table columns Step 1: Create column Definition Model class export  class ColumnDefinition {     columnDef: string;     header: string;     cell: any;     constructor(_columnDef: string, _header: string, _cell: any) {      this.columnDef = _columnDef;       this.header = _header; this.cell = _cell;     }   } Step 2: Add Mat-Table Defintion as below in Html Template  <table mat-table [dataSource]="mattabledataSource" matSort class="mat-elevation-z8">     <ng-container *ngFor="let col of displaycolumndefs" matColumnDef="{{col.columnDef}}" >         <div   >             <th mat-header-cell *matHeaderCellDef  mat-sort-header > {{col.header}}  </th>             <td mat-cell *matCellDef="let element">{{ col.cell(element) }}</td>         </div>     </ng-container>       <tr mat-header-row *

Material Angular Multi-Select drop down|Mat CheckBox|Select All Multi-Select drop down

Material Angular Multi-Select drop down With Select All Check Box Material Angular drop down as multi select with select all option using mat check box.

Material Angular Table Column Header With Multi Selection,Material Angular Table Column Selection,Mat-Table

Material Angular Table Column Header With Multi-Selection| Material Angular Table Header Column Check Box  Sometimes we need multi-selection in a single click & here we discussed. Knowledge required  MatCheckboxModule-mat-checkbox,MaterialCheckBox Module  MatTableModule- mat-table,MatTable Module  TwoWayBinding  Typescript array  Step 1: Modules to import  import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatTableModule} from '@angular/material/table'; import {MatCheckboxModule} from '@angular/material/checkbox'; Step 2: Have to define a class  type for two way binding with mattable export interface people {   name: string;   Sno: number;   canspeak: boolean;   canwrite: boolean; } Step 3 : Create an array for the people type  const ELEMENT_DATA: people[] = [   {Sno: 1, name: 'John', canspeak: false, canwrite: false},   {Sno: 2, name: 'Miller', canspeak: