Logo
Ctas Info Services

Angular Basics

72

Angular is a component-based development framework for building scalable web applications, built on TypeScript:

1. component 2. routing, 3. forms management, 4. client-server communication, and more

Plateform uses for single-developer projects to enterprise-level applications.

Components: ng generate component first

Components are the building blocks that compose an application. A component includes a TypeScript class with a @Component() decorator, an HTML template, and styles. The @Component() decorator specifies the following Angular-specific information:

import { Component } from ‘@angular/core’;

@Component({
selector: ‘first’,
template: `

Hello World

This is my first component!

`
})
export class FirstComponent {
// The code in this class drives the component’s behavior.
}

Route:

Often, as a user navigates your application, you want to pass information from one component to another.

import { Router, ActivatedRoute, ParamMap } from ‘@angular/router

const routes: Routes = [
{ path: ‘first-component’, component: FirstComponent },
{ path: ”, redirectTo: ‘/first-component’, pathMatch: ‘full’ }, // redirect to `first-component`
{ path: ‘**’, component: PageNotFoundComponent }, // Wildcard route for a 404 page
];

Forms: Handling user input with forms is the cornerstone of applications.

1. Reactive form

import { Component } from ‘@angular/core’;
import { FormControl } from ‘@angular/forms’;

@Component({
selector: ‘app-reactive-favorite-color’,
template: `
Favorite Color:
`
})
export class FavoriteColorComponent {
favoriteColorControl = new FormControl(”);
}

2. Template-driven forms
import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-template-favorite-color’,
template: `
Favorite Color:
`
})
export class FavoriteColorComponent {
favoriteColor = ”;
}

There are many more features are available in the Angular framework to build a PWA application.

Share:

Comments:

Leave a Reply

Your email address will not be published.