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
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.
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
create folder for your component in the app folder
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 postsinside 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
Top comments (1)
very informative, please continue = this.angular teachings