Angular full tutorial

 Understanding the Basics

1. What is Angular?

• Angular is a framework for building web applications. It provides tools and libraries that help you build robust, maintainable, and scalable applications.
• It follows the Model-View-Controller (MVC) architecture, which helps separate concerns in your code, making it more organized and easier to manage.

1. Setup Environment:

• Install Node.js: Angular requires Node.js to run. Download and install it from nodejs.org.

Verify Installation:

• Open Terminal.
• Type node -v and npm -v to check the installed versions.
• node -v - Node.js installed. Node.js is a JavaScript runtime used for running JavaScript code outside of a browser, like on servers or for building tools.
• npm -v -(Node Package Manager) installed.   npm is used to manage packages (libraries or tools) that you can use in your Node.js projects.

Install Angular CLI: 

• The Angular CLI (Command Line Interface) helps with creating and managing Angular projects. Install it using npm (Node Package Manager):

npm install -g @angular/cli17

2. Create a New Angular Project

• Open your terminal or command prompt and run:

ng new my-angular-app

3. Navigate to Project Directory

• Go to the newly created project folder:

cd my-angular-app

4. Serve the Application

• Start the development server

ng serve

5. Understand the Project Structure

• src/app: This folder contains your application code.

app.component.ts: The root component for your application.

app.module.ts: The root module that declares and imports components and services.

• rc/environments: Contains environment-specific configurations.
• angular.json: Configuration file for Angular CLI.

6. Create Components

• Components are the building blocks of Angular applications. To create a new component, run:

ng generate component my-component

This command creates four files in src/app/my-component:

• my-component.component.ts: TypeScript file with the component's logic.
• my-component.component.html: HTML file with the component's template.
• my-component.component.css: CSS file with the component's styles.
• my-component.component.spec.ts: Test file for the component.

Angular Bootstrap 

Angular

• Definition: Angular is a front-end framework developed by Google for building dynamic single-page web applications.

Bootstrap

• Definition: Bootstrap is a CSS framework developed by Twitter that provides pre-designed UI components like buttons, forms, modals, and grid layouts.

Angular Bootstrap

• Definition: Angular Bootstrap refers to the practice of using Bootstrap’s design system within an Angular application to quickly build responsive and modern UIs.

Install Bootstrap:

• Navigate to your Angular project directory and install Bootstrap via npm;

npm install bootstrap

Include Bootstrap in Your Angular Project:

• Open the angular.json file and add the Bootstrap CSS to the styles array:

"styles": [

  "node_modules/bootstrap/dist/css/bootstrap.min.css",

  "src/styles.css"

],

Include Bootstrap in Your Angular Project:

• Open the angular.json file and add the Bootstrap CSS to the styles array:

 

"scripts": ["node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"]

moblie response  

• Smartphones -xs( extra Small )
• Tablets - sm(Small)
• Laptops - md ( Medium )
• Desktop - lg ( large )

Install Angular Material

• Angular Material is a UI component library for Angular that provides a set of reusable and well-designed UI components following Material Design principles.

1. Install Angular Material:

ng add @angular/material

• This command will automatically install Angular Material, Angular CDK (Component Dev Kit), and Angular Animations, and will set up the Angular Material theme in your project.

2. Choose a Theme

• During the installation process, you will be prompted to select a theme. You can choose a pre-built theme (like Indigo/Pink, Deep Purple/Amber, etc.) or set up a custom theme later.

3. Import Angular Material Modules:

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

// Import Angular Material modules

import { MatButtonModule } from '@angular/material/button';

import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({

  declarations: [

    AppComponent

  ],

•   imports: [

    BrowserModule,

    MatButtonModule,// import

    MatToolbarModule , ////import

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Angular data binding:

•  Angular, "data binding" is a technique used to coordinate communication between the component's logic (TypeScript code) and the template (HTML). 

Ex:

• Let's say you have a component with a property called Name:

// app.component.ts

import { Component } from '@angular/core';

@Component({

  selector: 'app-profile',

  templateUrl: './profile.component.html',

  styleUrls: ['./profile.component.css']

})

export class ProfileComponent {

  name : string = "ram";

}

String Interpolation:

• String interpolation is a way to embed expressions into a string to display dynamic content. In Angular, you use double curly braces ({{ }}) for this purpose.

Ex:

• You can use string interpolation to display the value of Name in the HTML template:

<!-- app.component.html -->

<p> hi i am {{ name }}</p>

Property Binding :

• Property binding uses square brackets ([]). 

The syntax for property binding is:

////html

[property] = "expression"

• property: The target property of the HTML element you want to bind to.
• Expression: The TypeScript expression that should be evaluated and passed as a value to the property.