Why Angular?

Angular is a modern TypeScript-based framework for building Web, Cross-Platform, and progressive Web applications. Angular was developed by Google in 2015. It’s used in startups and large-scale enterprises like Sony, Upwork, Clickup, Google, and others. Here are a few reasons that will make you fall in love with Angular.

Why do we need frameworks?

Angular is a robust tool with all the tools you need to develop the web app of your desire, from the startup to an enterprise scale. This means the developers will spend less time reinventing the wheel to build the product.

When working with Angular, you don’t need to worry about finding the right suited, still maintained library for:

• Routing
• Forms
• Working with APIs
• Testing
• Environment files
• State management, etc.

Angular delivers all that out of the box.
Let’s look at the core features of Angular.

CLI

Angular Command-Line-Interface is a built-in tool that speeds up app development by allowing you to generate new applications and application parts and wire up dependencies automatically.

• Create a new Angular project using the CLI.

$ ng new <APP-NAME>

The CLI can also be used to generate application parts:

• Modules ng g module <PATH> or shorthand ng g m <PATH>
• Components ng g component <PATH> or ng g c <PATH>
• Interfaces ng g interface <PATH> or ng g i <PATH>
• Services ng g service <PATH> or ng g s <PATH>
• Interceptors ng g interceptor <PATH>
• Directives ng g directive <PATH> or ng g d <PATH>
• Pipes ng g pipe <PATH> or ng g p <PATH>, etc.

CLI wires up dependency injection automatically. It also helps you upgrade the application version.

Angular 17 Upgrade Guide with SSR

Angular.json

The Angular.json is a main project configuration file. This is where the project wired up the application starter file, settings on the style kit and serving the application in dev mode, build settings for each environment, testing tools, and more.

For the most part, you don’t need to change anything in here. Should you need to tweak the building settings, here is a guide on how to do it.

TypeScript

Angular works with TypeScrpt out of the box. This means you can use types, interfaces, enums without installing additional libraries or making a custom setup.

Components

Angular is a component-based framework. Components are the class-based reusable building blocks that contain business parts and create UIs.

Each component consists of four files:

• Template (HTML)
• Styles (CSS/SCSS)
• Component (TypeScript)
• Spec (TypeScript Test file)

@Component({
  selector: 'app-todos', // component selector <app-todos></app-todos>
  templateUrl: './todos.component.html', // path to HTML file
  styleUrls: ['./todos.component.scss'] // path to Styles file 
})
export class TodosComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    console.log('Hello World!')
  }

}

Components are created in the tree-style hierarchy and have bidirectional communication. The parent component can pass data to the child component, and the child can send data back to the parent or pass to another child component.

Components & Templates

Angular’s HTML templates allow you to bind Angular commands into HTML easily.

When added to a template, any class property created in the TypeScript component file will be displayed on the user interface.
This can be done using the String Interpolation in Angular:

// component
export class AppComponent {
  title = 'Hello World';
}

<!-- template -->
<div>
  <h1>{{ title }}</h1>
</div>

Whenever the value of the “title” property changes, Angular will render the component and update the UI in real-time. This means every class property, function, or getter method can be used like a state that updates the user interface.

Property bindings

Angular allows you to bind class properties into the HTML tags and update them dynamically:

<div [id]="customId">Title</div>

<div [class]="isClicked ? 'active' : 'default'">Title</div>

<button (click)="onButtonClick()">Click me</button>

Any tag wrapped in square brackets corresponds to the built-in HTML tag (such as class, id, etc), while the value it’s assigned to is the class property in the TypeScript file.

While the event-binding properties wrapped in parentheses are binded to the class methods declared in the TypeScript file.

In addition, you can create custom components (Directives) and bind them to the HTML tags as a custom style or an event handler.

Control Flow

The template also allows control management, such as displaying content based on conditions:

<div *ngIf="temperatureInCelsisus > 30">
 It's Hot day!
</div>
<div *ngIf="temperatureInCelsisus < 0">
 It's Cold day!
</div>

Or iterating through an array of items and displaying each in the component file:

<ul>
   <li *ngFor="let todo of todos">{{ todo.title }}</li>
</ul>

As well as lazy loading content using the defer blocks.

Router

The Angular Router is a built-in module in Angular that provides navigation and routing functionality for Angular applications. It lets you define routes and navigate between different pages (components).

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'profile/:id',
    component: ProfileComponent,
  },
  {
    path: 'todos',
    // lazy loaded route
    loadChildren: () => import('./Todos.module').then(m => m.TodosModule),
  },
]

The routes can have dynamic paths (/:id) and you can have different routes based on the component level, e.g.

• application-level router file
• module-based router file (that is lazyloaded when you land on the child route, loadChildren: () => import(‘./Todos.module’).then(m => m.TodosModule))

Angular Router also supports Resolvers that prefetch API data into the route and route Guards to block access to specific routes.

Services

Services are just another class files commonly used to make HTTP calls to the backend. These classes don’t have any templates are marked with the Injectable decorator used for the Dependency Injection.

The default HTTP Client in Angular can perform any REST operation:

• GET, POST, PUT, PATCH, or DELETE.

Example of a service in Angular:

@Injectable({
  providedIn: 'root'
})
export class TodosService {

  constructor(private readonly httpClient: HttpClient) {}

   getAllTodos(): Observable<ITodo[]> {
     return this.httpClient.get<ITodo[]>('localhost:3000/api/todos');
   }

   createTodo(todoData: ITodo): Observable<ITodo> {
     const headers = new HttpHeaders()
     headers.set('content-type', 'application/json')
     return this.httpClient.post<ITodo>('/api/...', todoData, { headers });
   }
}

The service is then injected via a constructor in the component where we want to use it.

class YourComponent {

constructor(private readonly todosService: TodosService) {}

ngOnInit(): void {
  this.todosService
    .getAllTodos()
    .subscribe((data: ITodo[]) => console.log(data));
} 

}

Services also work with HTTP interceptors.

If this syntax seems a bit odd to you, check out my previous blog on managing APIs in Angular 👇

Managing APIs using Rx.js Observables

Reactive Programming

Angular makes use of the Reactive Programming paradigm to

• handle state changes between components
• handle HTTP calls
• work with Reactive forms and similar features

The main library used for handling Reactive state changes is Rx.js. Rx.js is a powerful utility tool that lets you manage your components using Observables.

Rx.js Core Features

However, in recent years, Angular has adopted signals as well.

Angular Signals is a new way to handle reactivity (without Zone.js) by granularly tracking how and where your state is used throughout an application, allowing the framework to optimize rendering updates.

  export class AppComponent {
    title = signal<string>('Angular Signals')
    year = signal<number>(2023)
    features = signal<string[]>([
      'Components', 
      'Directives', 
      'Services', 
      'Pipes'
    ]);
}

Like with string interpolation, we bind signals in the template using parentheses:

<p>{{ title() }}</p>
<p>{{ year() }}</p>
<p>{{ features() | json }}</p>

Extensive Standard Library

Besides maintaining the core framework, the Angular team also maintains the tools that improve the experience. This includes:

• State management — NGRX
• UI library & Animations — Angular Material, Angular Animations
• Progressive Web Applications — Angular PWA
• Server-Side Rendering — Angular SSR & Analog.js, etc.

My journey to Angular

In recent years, Angular has gone from the most dreaded to a super-innovative web framework, and its popularity is growing.

I started my Angular journey in early 2019, and I have had experience before and after with other tools like Polymer, React, Jquery, Next, Windows Forms, etc.

Angular stuck with me the most out of all of them, and I’m saying this because I’ve seen the good, bad, the ugly sides and am looking forward to the new improvements coming to the framework.
While Angular is not for everyone and may not suit every project, it's very powerful and reliable software, and I enjoy working with it almost daily.

Start learning Angular today 👇

Mirza Leka

Angular Starter

View list

8 stories

Bye for now 👋