Angular Fundamentals Lecture

Introduction

Presenter: 10 years of experience in Angular
Goal: Learn Angular fundamentals in 2 hours
Approach: Step-by-step tutorial for beginners

Learning Plan

Divided into 10 parts
1. Definition of Angular
2. Installation
3. TypeScript Basics
4. Creating an Angular Project
5. Angular File Structure
6. Angular Fundamentals (Decorators, Components, Modules, Directives)
7. Introduction to Angular Flow
8. Bindings, Expressions, and Interpolation
9. Building a Simple Project
10. Summary and Next Steps

Installation Steps

Install Visual Studio Code: Download from the official site, run as admin.
Install Node.js: Download recommended version from nodejs.org.
Check Installations: Verify node and npm versions in the terminal.
Install Angular CLI: npm install -g @angular/cli
Create Angular Project: ng new project-name
Run Angular Project: Navigate to project folder and use ng serve

Angular Basics

What is Angular?

Definition: A development platform for building scalable web apps, focusing on UI.
Created by: Google
Built on: TypeScript
Core Parts:
1. Structured Framework (Component-Based)
2. Libraries (Routing, Forms, HTTP, etc.)
3. Developer Tools (Build, Test)
Focus: UI development

Angular File Structure

Configuration Files:
- package.json: NPM dependencies
- tsconfig.json: TypeScript configuration
- angular.json: Angular related configuration
Source Code: Located in src folder, specifically the app folder

Components

Definition: Reusable UI logic that can be loaded inside HTML
Component Structure:
- UI: HTML Template
- Logic: TypeScript Class
Example: @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // logic here }
Templates: Term for Angular HTML
Directives: Angular syntax in HTML, changes behavior of HTML elements
Selector: Used to load component in HTML (e.g., <app-root></app-root>)

Modules

Definition: Logically groups components
Example: @NgModule({ declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {}

Binding and Directives

Data Binding

Two-way Binding: Bind input element to component variable
- Example: <input [(ngModel)]="someValue">

Important Directives

ngModel: Two-way data binding for forms
ngFor: Structural directive for creating loops
Click: Event binding

Practical Steps

Building a Functional Component

Create a simple form

Input, Button, Display Table

Write logic to bind and display data
Example:

  <input [(ngModel)]="someValue">
  <button (click)="addValue()">Add</button>
  <table>
    <tr *ngFor="let val of values"><td>{{ val }}</td></tr>
  </table>

  export class AppComponent {
    someValue: string;
    values: string[] = [];
    addValue() {
      this.values.push(this.someValue);
      this.someValue = '';
    }
  }

Summary

Angular Fundamentals Covered:
1. Installation
2. Basic Concepts (Components, Modules, Directives)
3. Data Binding and Directives
Next Steps: Advanced topics available on questpond.com
Engagement: Rate, share, and interact on social media to get a free ebook on Angular interview questions.

Additional Resources

Questpond: Advanced tutorials and live training
YouTube Subscription: Subscription for more advanced lessons
Office Training: Available at the Mumbai office for in-person sessions