Angular Essentials

What is Angular?

  • Client Side / Framework
  • Developed and maintained by Google
  • Used to craft powerful Single Page Applications (SPA's) and CMS application
  • Part of MEAN Stack
  • Provides modularize way to write code


WhY Use Angular?

  • Rapid Development, Code Generation, and Better tooling
  • Component Architecture
  • Two-way data bindings
  • Cross Platform
  • Unit Testing Ready
  • 5x faster than AngularJS


Pankaj P. Parkar

Sr. Technology Consultant, Virtusa

  • Ex- Microsoft MVP (2015-22)

  • Angular GDE

  • Stackoverflow Topuser

About Me!


Angular CLI

  • It helps to minimize development effort and focus more on productivity
  • It can generate a new project
  • It can generate components, pipe, services, etc.
npm install -g @angular/cli

Create new Angular app

ng new posts-view --prefix=pv

Component and Bootstraping

import { Component } from '@angular/core';
  selector: 'pv-root',
  standalone: true,
  template: `<h1>Hello, {{name}}</h1>`,
  imports: [],
  styles: [],
export class AppComponent {
  name: string = 'World';
// main.ts
import {
} from "@angular/platform-browser";
import {
} from "./app/app.component";



Data Bindings



Property Binding 

[ngStyle]="{color: blue}"


Event Binding



In-built Directives

Loop in JS

const posts = ["BMW", "Volvo", "Mini"];
for (let post of posts) {
  console.log('Current Post is '+ post);

Using *ngFor directive on template

  <li *ngFor="let post of posts">
    {{ post }}


Http Calls

JSON Placeholder API (Free opensource)


Base Link -

Method URL
GET /posts
GET /posts/1
UPDATE /posts/1




    <link href="style.css" />
    <script src="app.bundle.js"></script>

URL: #/user/list

URL: #/about

URL: #/user/details/1

<h2>User List</h2>
 About Content
<h2>User Details</h2>

What we have learnt so far?

  • Create a brand new angular app
  • Component
  • Bindings and Directives
  • Http 
  • Routing
  • Forms



Q & A



Docs (For API import check)

Best Practices

Coding guidelines by John Papa




Angular Essentials

By Pankaj Parkar

Angular Essentials

Angular Essentials

  • 251