Angular Newbies IV
Tags: javascript, angular, webdev, beginners
Published: 2021-12-27 09:10:37

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx0qz6n8whtzpopsssv3.png)

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 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fylu9qrmbt7yrfix3bp.png)

here is the structure of the component class 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jb59w9q1yalgq6axh4v2.png)
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