Angular Basics
Explain the basic concepts of Angular, including components, modules, and services.
Angualr is a platform and framework for building single-page client applications using HTML and TypeScript. It is maintained by Google and a community of individuals and corporations.
Installation
To install Angular CLI, use the following command:
1 | npm install -g @angular/cli |
This command installs Angular CLI globally on your system, allowing you to create and manage Angular projects.
create a new Angular project:
1 | ng new my-angular-app |
This command creates a new directory called my-angular-app
with all the necessary files and dependencies for an Angular application.
serve the application:
1 | cd my-angular-app |
This command starts a local development server and opens the application in your default web browser. The application will be available at http://localhost:4200
.
Component
Components are the main building blocks of Angular applications. Each component represents a part of a larger web page. Organizing an application into components helps provide structure to your project, clearly separating code into specific parts that are easy to maintain and grow over time.
To create a new component, use the following command:
1 | ng generate component todo-list |
This command creates a new directory called todo-list
with four files:
todo-list.component.ts
: The TypeScript file that contains the component’s logic.todo-list.component.html
: The HTML file that contains the component’s template.todo-list.component.css
: The CSS file that contains the component’s styles.todo-list.component.spec.ts
: The test file for the component.
todo-list.component.ts - This file contains the component’s logic and metadata. The @Component
decorator is used to define the component’s metadata, including its selector, template URL, and style URL. The name of the component is TodoListComponent
.
1 | import { Component } from '@angular/core'; |
- selector is the name used to reference the component in HTML templates. In this case, add
<app-todo-list></app-todo-list>
to the HTML file where you want to use this component. - imports array is used to import other Angular modules or components that the component depends on. E.g FormsModule
- templateUrl is the path to the HTML file that contains the component’s template. styleUrl is the path to the CSS file that contains the component’s styles.
- styleUrl is an array of paths to the CSS files that contain the component’s styles. You can specify multiple stylesheets if needed.
Template
In Angular, a template is a chunk of HTML. Use special syntax within a template to leverage many of Angular’s features.
Text interpolation
Text interpolation is a way to display dynamic data in the template. It allows you to bind data from the component class to the HTML template using double curly braces {{ }}
.
In the todo-list.component.ts
file, add a property called title
to the TodoListComponent
class. This property will hold the title of the todo list.
1 | title = 'Todo List'; |
In the todo-list.component.html
file, use text interpolation to display the title in an <h1>
element.
1 | <h1>{{ title }}</h1> |
When the component is rendered, the value of the title
property will be displayed in the <h1>
element.
Property binding
In Angular, you use property bindings to set values directly to the DOM representation of the element.
1 | <!-- Bind the `disabled` property on the button element's DOM object --> |
Two-way data binding
Two way binding is a shorthand to simultaneously bind a value into an element, while also giving that element the ability to propagate changes back through this binding.
The syntax for two-way binding is a combination of square brackets and parentheses, [()].
1 | import { Component } from '@angular/core'; |
Event Listener
Angular supports defining event listeners on an element in your template by specifying the event name inside parentheses along with a statement that runs every time the event occurs.
In the todo-list.component.html
file, use event binding to call the handleAddTodo
method when the button is clicked.
1 | <input type="text" [(ngModel)]="newTodo" placeholder="Add a new todo" /> |
In the todo-list.component.ts
file, add a method called onAddTodo
that will be called when the button is clicked.
1 | import { Component } from '@angular/core'; |
When the button is clicked, the handleAddTodo
method will be executed, and the message “Todo added!” will be logged to the console.
Control flow
Angular templates support control flow blocks that let you conditionally show, hide, and repeat elements.
@for
@for block block repeatedly renders content of a block for each item in a collection.
1 | <ul> |
*ngFor
ngFor is a structural directive that allows you to iterate over a collection and create a template for each item in the collection.
You needc to import CommonModule
in the component’s imports array to use ngFor
.
1 | <ul *ngFor="let todo of todos"> |
@if
@if block block conditionally displays its content when its condition expression is truthy.
1 | @if (a > b) { |
*ngIf
*ngIf is a structural directive that conditionally includes or excludes a template based on the value of an expression.
You need to import CommonModule
in the component’s imports array to use ngIf
.
1 | <div *ngIf="a > b; else elseBlock"> |
injectable service
Services are singleton objects that are instantiated only once during the lifetime of an application. They are used to share data and functionality across components. Services are typically used for tasks such as fetching data from a server, managing application state, or encapsulating business logic.
Services have @Injectable decorator, which marks a class as available to be provided and injected as a dependency. The @Injectable
decorator is used to define a service in Angular.
1 | import { Injectable } from '@angular/core'; |
HttpClient
HttpClient is a built-in Angular module that provides a simplified API for making HTTP requests. It is part of the @angular/common/http
package and is designed to work with observables, making it easy to handle asynchronous data streams.
setup - configure HttpClient in app.config.ts
1 | import { provideHttpClient } from '@angular/common/http'; |
now you can use HttpClient by injecting it into your components or services.
use HttpCllient in a service
1 | import { inject, Injectable } from '@angular/core'; |
From now on, you can use the ToDoService
in your components to fetch data from the API. services can be injected into other services or components using the inject
function.
1 | todoService = inject(ToDoService); |