Angular Newbies IV

Angular Components

angular is set of components, we create each component and arrange them in to form our application.

component is the building block of each angular application , so how angular component is formed ?

The structure of the angular component

each angular component is consisted of

1. Template and it is the view of the application is the HTML, it's what user seas on the browser like buttons, paragraphs, headings and so on.

2. Class is the code, logic associated with the view, it where we write the logic there

e.g if some clicks the button on the template/HTML what will happen,

the class contains to main things to form the class

• Properties or data Elements for use or bind in the view/HTML

• Methods are functions that execute logic needed in the view

3.MetaData is what the class makes a component with out meta data the class will be regular JS/TS classes, Meta Data defines what this class is, it provides additional information about the component. MetaData is defined with a decorator will see what decorator is later !

let's simplify with supporting Pictures

that is the two files mainly formed the component in conventional to name the component componentName.component.ts | componentName.component.html to show this is a component class or component template

here is the structure of the component class

first import what we need and it's @Component

The Metadata contains

• Selector : is useful when you are using the class inside the view

• Template, is the view associated with the class

• style is the CSS or sass related specifically to the view

the class is now officially is a Component remember component needs HTML,CSS,and Typescript simple

isn't it , so now you are fully understood the component let's see how we can create the component

Creating a component manually

here are the steps

1. create folder for your component in the app folder

2. create these files ComponentName.component.html, componentName.Component.ts, componentName.component.scss inside the folder remember to replace component.Name => to appropriate name and .scss file remember as we mentioned the other posts

3. inside the .ts file her we defined our class

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

@Component({
  selector: 'wc-community',
  templateUrl: './community.component.html',
  styleUrls: ['./community.component.scss']
})
export class CommunityComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

import what we need dont fogter the decorator and the decorator stars with @DecoratorName ({}) and pass an object the decorator has this meta data selectorName , path to the html file , path to the style file

and fiannly we have to tell angular about this component in the app.module.ts the app.module.ts bootstraps our application is where the angular looks initially when your application loads

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

import { AppComponent } from './app.component';
import {ComponentName } from './path of the component'


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

import the component from the path you created wtih the name of the class then add inside the declartions array

Yeeeeeeeeey 🎊 we created manually our first Component, here it's your turn try it to create a new component

see you soon buddy 🖐 love 💙 to hear a feedback from you how it went this journey with me