Angular Framework

Angular Framework Installation

HttpService in Angular Framework:- It is used to handle HttpRequest from external resources and fetch, post, update and delete from external resources .we will create web API or web services to get data from a remote server, web services, and web API will be consumed by HttpService in Angular Framework. Web Services will be created by Server side script such as Java, PHP,.NET, PYTHON, Ruby, etc, and Consumed by Angular HTTP Service. in  Angular  (currently on  Angular -17) . subscribe () is a method on the Observable type. The Observable type is a utility that asynchronously or synchronously streams data to a variety of components or services that have  subscribed  to the observable. Step to implement Services:- 1)  go into app.module.ts file and register httpService provider import { provideHttpClient } from '@angular/common/http' ; providers : [     provideClientHydration (),     provideHttpClient ()   ] 2)  cre...

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) {     ...

Angular Framework Introduction .......................................................................................................................................................................   before study this first you learn JS and Jquery:- https://www.shivatutorials.com/search/label/JAVASCRIPT https://www.shivatutorials.com/search/label/Jquery It is a javascript framework which provides an MVC design pattern to develop dynamic web application using HTML and JavaScript Object. MVC means Model, View, and Controller, it is used to distribute the project on different project layer. Angular JS-Support JavaScript code  and Typescript code. structure to write Business Code. The flow of MVC:- MVC flow is the opposite of there name. The First Controller module will be loaded then View will be loaded after that model object will be integrated.                    ...

Angular JS Introduction:- https://www.shivatutorials.com/search/label/JAVASCRIPT https://www.shivatutorials.com/search/label/Jquery It is a plugin of JavaScript which is used to create a dynamic web application using HTML+CSS+Bootstrap and web services. Angular JS use MVC Design pattern to develop an application,  MVC means model, view, and controller. The model  means data access layer, we will use a third party script such as PHP,Java,.NET, Node to create a model layer using API (application programming interface). View means User access layer, we will use HTML 5+CSS3+Bootstrap  to create a user access layer.   Controller means Business access layer, it will provide complete dynamic programming using JavaScript, Jquery, or typescript. What is the difference between Angular and Angular JS? Angular js is the 1.0 version of angular, initially angular use javascript without using the node package manager and node library hence it is called Angular JS. later...

Angular JS Interview Question :- ANGULAR JS 1.0 and ANGULAR JS Framework 2.0,4.0,5.0,6.0,7.0 .................................................................................................... Q1 what is difference between Angular JS and normal javascript? Q2 what is directive elements in angular js?       ng-model       ng-bind      ng-repeat      ng-pattern      ng-style     Q3 what is $scope variable in Angular? Q4  what is Angular API? Q5  what is module in Angular JS and How we can create Module? Q6  what is Component and Sub Component and root Component? Q7 what is data binding concept in angular js ,explain one-way and two-way binding with example Q8 what is Property binding and Event binding? Q9 what is dependancy injection in angular JS .how we can implement them Q10 what SPA means Single Page Application? Q 11 what is Routing Concept.ho...

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}}

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 ...

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() {     } ...

Angular Interview Question:-  1) How we can navigate from one component to another using a router link, button link? 2) what is forRoot and forChild() in Angular Framework? 3) What is Data Binding? How many ways it can be done? 4) what is observable, subscribe, and promise in Angular? 5) What is ngOnInit()? How to define it? 6)What is string interpolation in Angular? 7) What Is Dependency Injection (DI)? 8) What Is runGuardsAndResolvers function? 9). What is bazel in angular 8? 10) What is typeofchecks in Angular 8?                                   

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...

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', ...