Angular Framework Installation

Angular Framework

Typescript Variable Declaration in Angular

Component:-  It is the complete set of files that contain template (.html), CSS, modules and typescript file to implement the functionality. By default angular js contain app-component, it is called the root component of the angular application,it should be always present in an application. We can create Our own component in angular JS using CLI ng generate component componentname It will create a component under app folder modify component HTML page load component under app component.html <app-scs></app-scs>

Create Addition Program in Angular Framework:- Angular Framework provides Typescript or additional javascript code patterns to write code. Typescript provides Object-Oriented JavaScript to write code. 1)Create Component provide name addition 2) write code on Typescript file using this pattern under Constructor() export class AdditionComponent implements OnInit {   a=100   b=200   c=0   constructor() {   alert("addition is "+(this.a+this.b));   this.c = this.a+this.b   }   ngOnInit() {  // alert("ON INIT");   } } 3) Create HTML File and Write Code to view data {{c}}

CALCULATOR PROGRAM IN ANGULAR 8 

Program Of Table in Angular Framework:- Code of HTML <p>factapp works!</p> <input type="text" name="a" [(ngModel)]="a" /> <br><br> <input type="button" name="btnclick" value="Click" (click)="factorial()"> <br> <div [innerHTML]="s"></div> Code of TS import { Component, OnInit } from '@angular/core'; @Component({   selector: 'app-factapp',   templateUrl: './factapp.component.html',   styleUrls: ['./factapp.component.css'] }) export class FactappComponent implements OnInit {   a   f=1   i=1   s=''   constructor() {          }   ngOnInit() {   }   factorial()   {       this.f=1       this.s=""      for(this.i=1;this.i<=10;this.i++)       {          this.s=this.s+ this.a*this.i+"<br>" ...

First Create a Component using  ng g c fact After Create HTML Page <p>factapp works!</p> <input type="text" name="a" [(ngModel)]="a" /> <br><br> <input type="button" name="btnclick" value="Click" (click)="factorial()"> <br> <div [innerHTML]="f"></div> Create a TypeScript:- import { Component, OnInit } from '@angular/core'; @Component({   selector: 'app-factapp',   templateUrl: './factapp.component.html',   styleUrls: ['./factapp.component.css'] }) export class FactappComponent implements OnInit {   a=5   f=1   i=1   s=''   constructor() {       }   ngOnInit() {   }   factorial()   {              for(this.i=1;this.i<=this.a;this.i++)       {          this.f=this.f*this.i       }   } }

Step1st:-  Download Template  and extract Step2nd:-  copy all css,js,img  into assets step3rd:-  copy all CSS and js into index.html Step4th:-  copy the header part of the template and footer part of the template in appcomponet.html and in the middle part router-outlet should be similar to this <div id="page"> <nav class="gtco-nav" role="navigation"> <div class="gtco-container"> <div class="row"> <div class="col-sm-2 col-xs-12"> <div id="gtco-logo"><a href="index.html">Beryllium</a></div> </div> <div class="col-xs-10 text-right menu-1"> <ul> <li class="active"><a routerLink="home">Home</a></li> <li><a routerLink="about">About</a></li> <li class="has-dropdown...

Normal CheckBox Example in Angular Framework:- Create Component for normal CheckBox Example Code of design file <input type="checkbox" name="chk1" [(ngModel)]="chk1" value="C">C <input type="checkbox" name="chk2" [(ngModel)]="chk2" value="CPP">CPP <input type="button" name="btnclick2" value="Click" (click)="showcheck()"> {{res}} Code of typescript file import { Component, OnInit } from '@angular/core'; @Component({   selector: 'app-factapp',   templateUrl: './factapp.component.html',   styleUrls: ['./factapp.component.css'] }) export class FactappComponent implements OnInit {   s=''   res=''   chk1=''   chk2=''   res2=''      constructor() {          }   ngOnInit() {   }      showcheck(){      this.res=...

MultiCheckBoxExample in Angular Framework:- Create Component using checkboxexample ng g c checkboxexample CheckBoxExample.ts import { Component, OnInit } from '@angular/core'; @Component({   selector: 'app-checkboxexample',   templateUrl: './checkboxexample.component.html',   styleUrls: ['./checkboxexample.component.css'] }) export class CheckboxexampleComponent implements OnInit {   masterSelected:boolean;   checklist:any;   checkedList:any;   constructor() {     this.masterSelected = false;     this.checklist = [         {id:1,value:'C',isSelected:false},         {id:2,value:'CPP',isSelected:true},         {id:3,value:'DS',isSelected:true},         {id:4,value:'JAVA',isSelected:false},         {id:5,value:'PHP',isSelected:false},         {id:6,value:'ANGULAR',isSelected:false},   ...

Navigation from One Comopnent to another in angular Framework  :- Angular Provide Router class to manage navigation first we will import Router class under login component import { Router } from '@angular/router'; First Create Component and design login form according to requirement ,I am designing sample login form using RectiveFormModule or Model Driven Form Approach. write this code in design file or template file of component:-  <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >       <input type = "text"  name = "emailid" placeholder = "emailid"          formControlName = "emailid">       <br/>             <input type = "password" name = "passwd"          placeholder = "passwd" formControlName = "passwd">       <br/>             <input ...

How to  pass parameter using RouterLink in Angular 9:- Step1st:-  Create app-routing-module.ts  import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { CalcComponent } from './calc/calc.component'; import { CheckboxexampleComponent } from './checkboxexample/checkboxexample.component'; import { FactappComponent } from './factapp/factapp.component'; const routes: Routes = [    {path:"calc/:id", component:CalcComponent},    {path:"checkbox", component:CheckboxexampleComponent},    {path:"fact", component:FactappComponent} ]; @NgModule({   imports: [RouterModule.forRoot(routes)],   exports: [RouterModule] }) export class AppRoutingModule { } step2nd:- Create Parameters under routerLink <div> <h1>Angular 7 Routing Demo</h1> <nav>    <a [routerLink] = "['/calc', '1']">Calculator</a...

Create a Custom Attribute in Angular Framework:- A custom attribute is used to create our own attribute type directive in an angular Framework. If we want to create common features in the angular application which will be implemented into multiple dom element then we can use the Attribute directive similar to the predefine attribute directive ngClass and ngStyle. Step for Custom directive, First use the CLI approach to create a custom directive ng g directive directive name It will create two different files .ts and spec.ts and its reference will be by default added on app.module.ts file in import and declaration decorator. now we are creating ChangeText Directive then Step1st:-  ng g directive changeText Step2nd:-  Write Code on change-text-directive.ts import { Directive,ElementRef } from '@angular/core'; @Directive({   selector: '[appChangeText]' }) export class ChangeTextDirective {   constructor(Element: ElementRef) {     ...

Create Template Driven Forms in Angular:- 1st:-   Create Component using ng g c scs 2nd:-  Create FormDesign Similar to HTML Form <form  method="post" (ngSubmit)="display()"  #fs="ngForm"> Enter name <input type="text" name="txt"  [(ngModel)]="txt" /> <br> <input type="submit" name="btnsubmit" value="submit" /> </form> <h1>{{rs}}</h1> here ngSubmit is used for a button click ,ngModel is used to bind HTML element text to the controller object. 3rd:- Write Code to display TextField Data under TypeScript code using Component Class export class RaheemComponent implements OnInit {   txt=''   rs=''   constructor() {     this.rs=''   }   ngOnInit() {   }   display()    {     alert(this.txt);     this.rs= this.txt;   } } 4th:-  When you run this code then it will appear error because FormModule Should ...

Create Custom PIPE in Angular:- Using this we can create our own PIPE which can be used in multiple views to change the properties of View Data at runtime. Create .ts file under app and add it on app.module.ts file Step to create Custom PIPE:- 1)  Right Click on app folder and create mypipe.ts file then create TypeScript class import {Pipe, PipeTransform} from '@angular/core'; @Pipe ({    name : 'scssqr' }) export class SquarePipe implements PipeTransform {    transform(val : number) : number {       return val*val;    } } 2)  Open app.module.ts file and Write Following Code:-     import { SquarePipe } from './mypipe';      Write   SquarePipe   under-declarations section 3)  Call Pipe on any HTML file under expression:-       {{ 21|scssqr }} ......................................................................

Pipe in Angular JS:- It is used to change the properties of ViewData under the Html file, It is also called Filter in Angular JS application,it was renamed as a PIPE angular Framework. It will be declared under HTML file with angular view attribute or String Interpolation {{'ram'|uppercase}} Here are some built-in pipes available with angular − Lowercasepipe Uppercasepipe Datepipe Currencypipe Jsonpipe Percentpipe Decimalpipe Slicepipe  ......................................................................................................................................................  Code of TS FIle:- import { Component, OnInit } from '@angular/core'; @Component({   selector: 'app-templatedemo',   templateUrl: './templatedemo.component.html',   styleUrls: ['./templatedemo.component.css'] }) export class TemplatedemoComponent implements OnInit {   a   todaydate = new Date();   constructor() {     } ...

Services in Angular Framework:- It is used to write the common code of an application that will be implemented into multiple components. for example, if we want to create a notification of an application then we will create a separate service for notification and inject service into the component.   ng g service myservice Service should be import into app.module.ts  write under providers attribute  implement logic under Service Class and Write Functionality import { Injectable } from '@angular/core'; @Injectable({   providedIn: 'root' }) export class MyserviceService {   constructor() { }   show() {        let ndate = new Date();        return ndate;     }   } Call Functionality under component after injection import { Component, OnInit } from '@angular/core'; import { MyserviceService } from '../myservice.service'; @Component({   selector: 'app-home', ...

TypeScript Code for CRUD Operation:- import { Component, OnInit } from '@angular/core'; import { HttpClient,HttpHeaders } from '@angular/common/http'; const httpOptions = {   headers: new HttpHeaders({     'Content-Type':  'application/json'   }) }; @Component({   selector: 'app-registration',   templateUrl: './registration.component.html',   styleUrls: ['./registration.component.css'] }) export class RegistrationComponent implements OnInit {   tid   data:string='';   truckno:string='';   tdesc:string='';   public truckdata = [];   constructor(private http: HttpClient) { }   ngOnInit() {     truckdata= this.http.get("http://shivaconceptsolution.com/webservices/showtruck.php").subscribe((data) => {          this.truckdata = Array.from(Object.keys(data), k=>data[k]);         });;   }   Truck () {    let...

1.1) First BackEnd Developer Create Web Services using PHP,.NET, JAVA , PYTHON, RUBY or CI.       BackEnd Developers will provide Web URL, Input Parameters and Output Parameter and Method (GET, POST) for example  http://shivaconceptsolution.com/webservices/tr.php Input Parameters:-  tno,tdet Post Method You can use postman or other web services checking tools for postman open chrome and write chrome://apps in url , download plugin, and check URL after successful login. 1.2 create component then create a path 1.3 write the following code to call web service under component typescript import { Component, OnInit } from '@angular/core'; import { HttpClient,HttpHeaders } from '@angular/common/http'; const httpOptions = {   headers: new HttpHeaders({     'Content-Type':  'application/json'   }) }; @Component({   selector: 'app-truck',   templateUrl: './truck.component.html',   styleUrls: ['....