Angular 15 basic tutorial with examples

-

 

Angular 15 Basic Tutorial with Examples

Angular 15 is the latest version of the Angular framework that enables developers to build powerful, scalable, and maintainable web applications. In this tutorial, we will walk through the basic concepts of Angular 15, such as setting up an Angular application, creating components, working with templates, data binding, directives, services, and routing.

1. Setting Up an Angular Project

To get started with Angular 15, you need to install Node.js and Angular CLI. Follow the steps below:

Install Node.js and npm

Download and install Node.js from nodejs.org. This will also install npm (Node Package Manager), which is required to manage your project dependencies.

Install Angular CLI

The Angular CLI (Command Line Interface) is a tool to easily create Angular projects and run them in development mode.

To install Angular CLI globally, open your terminal or command prompt and run:

bash
npm install -g @angular/cli

Create a New Angular Application

Once the Angular CLI is installed, you can create a new Angular project using the following command:

bash
ng new angular-15-tutorial

You will be prompted to choose options for your project, such as whether to add Angular routing or choose a stylesheet format (CSS, SCSS, etc.). You can choose the default settings for now.

After the project is created, navigate to the project directory:

bash
cd angular-15-tutorial

Serve the Application

To start the development server and see your application in action, run:

bash
ng serve

This will start the app, and you can view it at http://localhost:4200 in your browser.

2. Angular Components

Components are the building blocks of Angular applications. Each component consists of:

  • HTML for the template.
  • CSS for styling.
  • TypeScript for logic.

Creating a Component

To generate a new component, run:

bash
ng generate component hello-world

This creates four files:

  • hello-world.component.ts (the TypeScript file for component logic)
  • hello-world.component.html (the template for the component)
  • hello-world.component.css (the style file for the component)
  • hello-world.component.spec.ts (for unit tests)

Basic Component Example

In hello-world.component.ts:

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

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {
  message = 'Hello, Angular 15!';
}

In hello-world.component.html:

html
<h1>{{ message }}</h1>

In hello-world.component.css:

css
h1 {
  color: blue;
}

Now, use the app-hello-world component in the app.component.html (the root component) by replacing the content with:

html
<app-hello-world></app-hello-world>

This will render "Hello, Angular 15!" in blue color when you run the application.

3. Data Binding in Angular

Angular provides several ways to bind data between components and templates.

1. Interpolation (Text Binding)

Used for binding component data to the template:

html
<h1>{{ message }}</h1>

2. Property Binding

Bind a property of an HTML element to a component property:

html
<img [src]="imageUrl" />

In the component:

typescript
export class HelloWorldComponent {
  imageUrl = 'https://angular.io/assets/images/logos/angular/angular.png';
}

3. Event Binding

Bind events (e.g., button clicks) to methods in the component:

html
<button (click)="changeMessage()">Change Message</button>

In the component:

typescript
export class HelloWorldComponent {
  message = 'Hello, Angular 15!';

  changeMessage() {
    this.message = 'Message Changed!';
  }
}

4. Two-Way Binding

Angular provides ngModel for two-way data binding. For this, you need to import the FormsModule in the app.module.ts.

First, import FormsModule:

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';  // Import FormsModule here

import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent
  ],
  imports: [
    BrowserModule,
    FormsModule  // Add FormsModule to imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then, in your component:

html
<input [(ngModel)]="message" />
<p>{{ message }}</p>

This will create an input box that updates the message property in real-time as the user types.

4. Directives in Angular

Directives are used to manipulate the DOM or bind data to DOM elements.

1. Structural Directives (e.g., *ngIf, *ngFor)

  • *ngIf: Conditionally include an element in the DOM.
html
<p *ngIf="isVisible">This paragraph is visible.</p>

In the component:

typescript
export class HelloWorldComponent {
  isVisible = true;
}
  • *ngFor: Loop through a list and display each item.
html
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

In the component:

typescript
export class HelloWorldComponent {
  items = ['Apple', 'Banana', 'Orange'];
}

2. Attribute Directives (e.g., ngClass, ngStyle)

  • ngClass: Conditionally apply classes to elements.
html
<p [ngClass]="{ 'highlight': isHighlighted }">This is a text paragraph.</p>

In the component:

typescript
export class HelloWorldComponent {
  isHighlighted = true;
}
  • ngStyle: Apply inline styles dynamically.
html
<p [ngStyle]="{ color: textColor }">Styled Text</p>

In the component:

typescript
export class HelloWorldComponent {
  textColor = 'red';
}

5. Services and Dependency Injection

Services in Angular are used to share data and logic across components. You can inject services into components using Angular's Dependency Injection (DI) system.

1. Creating a Service

To generate a service, use Angular CLI:

bash
ng generate service message

In the generated message.service.ts:

typescript
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MessageService {
  private message = 'Hello from the service!';

  getMessage() {
    return this.message;
  }
}

2. Injecting a Service into a Component

In the component, you can inject the service using the constructor:

typescript
import { Component, OnInit } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {
  message: string;

  constructor(private messageService: MessageService) {}

  ngOnInit() {
    this.message = this.messageService.getMessage();
  }
}

In the template:

html
<p>{{ message }}</p>

6. Routing in Angular

Routing allows you to navigate between different views or pages in an Angular application.

1. Configuring Routes

In the app-routing.module.ts file, configure the routes:

typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';

const routes: Routes = [
  { path: '', component: HelloWorldComponent },
  { path: 'hello', component: HelloWorldComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. Adding RouterLink for Navigation

In the template, use routerLink to create links for navigation:

html
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/hello">Hello</a>
</nav>

<router-outlet></router-outlet>

The <router-outlet></router-outlet> is where the routed component will be displayed.

Conclusion

In this tutorial, we have covered the basics of Angular 15, including:

  1. Setting up a new Angular project.
  2. Creating and using components.
  3. Working with data binding (interpolation, property binding, event binding, and two-way binding).
  4. Using directives like *ngIf, *ngFor, ngClass, and ngStyle.
  5. Creating services and using dependency injection.
  6. Setting up routing to navigate between different views.

Angular 15 also comes with various improvements and features like enhanced type safety, better tree-shaking, and improved tooling, making it a great choice for building modern web applications.


Angular 15 New features

Comments

Post a Comment

Popular posts from this blog

Top 200 telagu words in hindi daily life?

-
 Here’s a list of 200 common Telugu words along with their Hindi meanings that can be used in daily life: Common Telugu Words and Their Hindi Meanings Telugu Word Hindi Meaning 1. నమస్కారం (Namaskaaram) नमस्कार 2. ధన్యవాదాలు (Dhanyavadalu) धन्यवाद 3. ఎలా (Ela) कैसे 4. నేను (Nenu) मैं 5. నువ్వు (Nuvvu) तुम 6. ఆయన (Aayana) वह (पुरुष) 7. ఆమె (Aame) वह (महिला) 8. ఇక్కడ (Ikkada) यहाँ 9. అక్కడ (Akkada) वहाँ 10. వెళ్లి (Velli) जाना 11. రాండి (Raandi) आइए 12. తీసుకోండి (Teesukondi) ले लो 13. ఇది (Idi) यह 14. అది (Adi) वह 15. వస్తువు (Vastuvu) चीज़ 16. పుస్తకం (Pustakam) किताब 17. ఆహారం (Aahaaram) खाना 18. నీళ్లు (Neellu) पानी 19. మంచి (Manchi) अच्छा 20. చెడు (Chedu) बुरा 21. ఆశ (Aasha) उम्मीद 22. సంతోషం (Santhosham) खुशी 23. కష్టం (Kashtam) कठिनाई 24. పని (Pani) काम 25. రోజు (Roju) दिन 26. సాయంత్రం (Saayantram) शाम 27. రాత్రి (Raatri) रात 28. ఉదయం (Udayam) सुबह 29. కోపం (Kopam) गुस्सा 30. ప్రేమ (Prema) प्यार 31. కోరిక (Korika) इच्छा 32. బాబు (Babu) बच्चा 33. అమ్మ (Amma) माँ 34. నాన్న (Nann...
Read more

Building strong foundational knowledge in frontend development topics

-
 These topics are essential for building strong foundational knowledge, and each comes with a simple solution or code snippet to illustrate the concept. 1. What is the difference between HTML, CSS, and JavaScript? Answer : HTML (Hypertext Markup Language) is used for structuring web content (headings, paragraphs, images, links, etc.). CSS (Cascading Style Sheets) is used for styling the layout, design, and appearance of the web content. JavaScript is used for adding interactivity and dynamic behavior to the website (e.g., form validation, animations, events). html <!-- HTML --> < div class = "box" > </ div > css /* CSS */ .box { width : 100px ; height : 100px ; background-color : blue; } javascript // JavaScript document . querySelector ( '.box' ). addEventListener ( 'click' , function ( ) { alert ( 'Box clicked!' ); }); 2. What are semantic HTML elements and why are they important? Answer : Semantic HTML elements cl...
Read more

Docker and Kubernetes Tutorials and QnA

-
 Docker and Kubernetes Tutorials: Detailed Guide Let's dive into detailed tutorials for Docker and Kubernetes, starting with their core concepts and progressing to hands-on examples. These tutorials are designed for both beginners and intermediate learners. Part 1: Docker Tutorial 1. Introduction to Docker Docker is a platform used to develop, ship, and run applications inside containers. Containers are lightweight, portable, and ensure consistent environments across different stages of the application lifecycle. They help solve the "works on my machine" problem. Key Concepts of Docker: Images : A blueprint for containers, containing everything needed to run an application (code, runtime, libraries, etc.). Containers : A runtime instance of an image, running isolated from the host system. Dockerfile : A script with a set of instructions to build Docker images. Docker Hub : A public repository of Docker images. Docker Compose : A tool to define and manage multi-container a...
Read more