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 enter, here 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)
Labels:
Location: Chennai, Tamil Nadu, India

Comments

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 *
1 comment
Read more

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.
Post a Comment
Read more

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:
Post a Comment
Read more