Angular Newbies IV

#javascript #angular #webdev #beginners

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 posts
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