Components In Angular

What Are Components In Angular?

  • In Web Development, The Angular is a SPA (Single Page Application) framework, and a view is made of one or more component.
  • An Angular component represents a portion or Block of a view.
  • The component is the basic building block of Angular Framework.
  • Generally, an interactive web page is made of HTML, CSS, and JavaScript. Angular component is no different.
  • Angular Component = HTML Template + Component Class + Component Metadata.
  • Components can be re-used.

Generate Angular Component using Angular CLI

  • You can create files for a component manually or using the Angular CLI command. Angular CLI reduces the development time. So, let’s use Angular CLI to create a new component.
  • Use the following CLI command to generate a component.
    • ng generate component <component name>
    • ng g c <component name>
  • All Angular CLI command starts with ng, generate or g is a command, component is an argument and then the name of the component.

Components In Angular

HTML Template

In Angular, HTML template is nothing but a regular HTML code with additional Angular specific syntax to communicate with the component class.

Class

  • In Angular, Essentially, a component class is a TypeScript class that includes properties and methods.
  • In Angular, Properties store data and methods include the logic for the component.
  • Eventually, this class will be compiled into JavaScript.

Metadata

  • In Angular, Metadata is some extra data for a component used by Angular to execute the component, such as the location of HTML and CSS files of the component, selector, providers, etc.
  • In Angular, Metadata information provided by Component Decorator function.

Component Naming Convention

  • In Angular, All the component files in Angular should follow the following format:
  • <component-name>.component.<file-type>
  • Example:
    • app.component.html
    • app.component.css
    • app.component.ts

Ways of calling components

  • There are 3 ways of calling our components inside app.component.html.
  1. By using Custom Tag
  2. By using Class selector
  3. By using attribute

Important Points

  • All custom components are added inside app component.
  • Component is UI building block.
  • We can have multiple components to make up our website.
  • Components can be re-used.
  • Components are initiated using modules.
  • Components are the combination of HTML CSS and javascript.

Source Code

user.component.ts File Code

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

@Component({
  selector: '[app-user]',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

user.component.html File Code

<p>user works! Mohammad Adil</p>

app.module.ts File Code

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html File Code

<p>Welcome To Angular By Learning Never Ends</p>
<app-user></app-user>

Download Source Code Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/pv3yqnifazlgx9w/Angular-Projects.rar/file

Download Notes Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/rbgjinkb48rcvmu/6+-+COMPONENTS.pptx/file

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *