Components

-
In this topic we will look at Angular Components and its metadata properties.

What is Angular Component ?

We can say Angular component is the main building block of angular application. The component contains data and logic which defines the behavior's and looks of the view. i.e. UI Page or HTML page.

Syntax to create angular component
ng generate component 'yourComponentName' or in short ng g c 'yourComponentName'. 
The angular component are javascript classes which is defined using @Component Decorator. The Component is responsible to provide data to view or html. Angular does this by using Data Binding to get the data from component to view or html.
An angular application can have any number of components and each components plays there own role in a angular application.

The components contains three main building blocks:
1. Template
2. Class
3. Metadata

Template or view or HTML file

Templates are nothing but HTML code with Angular Template Syntax, without template there is nothing for angular to render. Data in template comes from component and in component it come from angular services. By the use of data binding techniques we can keep template and component in sync. Template uses Event Binding or Two Way Data Binding to notify component whether  user has made some changes.

Two ways to specify template in Angular :
1. Defining the template inline.
2. Provide an external template.

Inline Templates ➤➤

We can specify template and styles inline using template and styles property as shown below
import { Component } from '@angular/core';

// @Component({
//   selector: 'app-root',
//   templateUrl: './app.component.html',
//   styleUrls: ['./app.component.css']
// })
@Component({
  selector: 'app-root',
  template: '<h1> {{title}} works </h1>',
  styles: ['h1 { font-weight: bold; }']
})
export class AppComponent {
  title = 'SchoolManagementSystem';
}

For multi-line template we can use Back Ticks( ` ) to enclose the template. Shown Below

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

@Component({
  selector: 'app-root',
  template: `
          <h1> {{title}} works </h1>
          <p> a long inline template </p>
           `,
  styles: ['h1 { font-weight: bold; }']
})
export class AppComponent {
  title = 'SchoolManagementSystem';
}

Class

Class contains properties and methods and by the use of Data Binding we can bind it to view or template. We can use typescript or javascript to create a class.

export class AppComponent {
  title = 'SchoolManagementSystem';
}

Metadata

Metadata provides information to angular about the components and angular uses this information to process the class. @Component decorator is used to define component.
Important properties in metadata are selector, templateUrl, styleUrls
Selector ⮚ It specifies the CSS selector, where this template will be inserted in HTML. i.e. app-root.
templateUrl ⮚ This property contains the path of HTML template which is going to be displayed in the browser. i.e. app.component.html
styleUrls ⮚ This property contains the path of CSS file specific to this component.

Simple component code is shown below:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'SchoolManagementSystem';
}

Once angular component is created we have to register the component to angular modules as shown below: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

we have to import the component and then in declaration we have to add it. Add we want to load AppComponent when angular starts, we have add it in bootstrap array.



← Bootstrapping                                                                                       DataBinding →

Comments

Post a Comment

Popular posts from this blog

Introduction to Angular

-
Welcome to the  Angular Tutorial . we will create an application at the end of this tutorial. we are writing this tutorial at the time of Angular 14 release. What is Angular? Angular is a UI Framework which is used to create Desktop and Mobile web Application. Angular  is built using JavaScript . The Angular is an open-source and helps us build dynamic & single-page applications (SPAs). With Angular you can create client-side application using HTML, CSS and TypeScript. Key differences between AngularJs & Angular 1. Controller and components In AngularJs we have controllers but in Angular we have component in place of controller.  In Angular, a component represents a UI element. You can have any number of components on a single web page. Each component is independent of each other and manages a section of the page. The components can have child components and parent components. 2. Directives Syntax of Directive is different in Angular as compared to AngularJs....
Read more

Bootstrap in Angular

-
Image
Angular Components   In this topic we will look how Angular work internally and bootstrap application. When you create a new angular project using ng new 'project Name' it will generate many files like shown below: checkout  Angular Application with Angular CLI  for more...   What is Bootstrapping ? Bootstrapping is a technique of loading or initializing our angular application. Angular takes following steps to our first view. 1. Index.html gets loaded. 2. Libraries gets loaded. 3. Main.ts entry point for application. 4. Root Module. 5. Root Component. 6. Templates. Index.html Index.html is the first page to load, you can find index.html under src folder src → index.html.  you can see index.html does not contain any javascript or stylesheet file, it only contain html tag  <app-root></app-root> inside body. index.html will look as shown below: <!doctype html > <html lang = "en" > <head>   <meta charset = "u...
Read more

Angular Directives

-
Image
In this topic we will look into angular directives and you can check our previous topic on Data Binding in angular application . What are Angular Directives?  Angular Directives are the elements which are basically used to change the behavior's or appearance of DOM(Document Object Model) element, Or you can say that directives are basically use to extend the power of HTML attributes and to change the appearance and behavior of DOM element. Types of Directives ➤➤ There are three types of directives based on behavior: 1. Structural Directives   ⮚   Structural Directives will shape the HTML view by adding or removing the element from DOM. There are three structural directives available: i. NgFor (*ngFor) 🠞 ngFor is built-in directive and belongs to structural directives. It is similar to for loop used in many programing language like java. So ngFor directive is used to iterate over collection. The Syntax used for ngFor =  *ngFor=”let <value> of <collectio...
Read more