Structure Component In Angular

In this article, we will examine the Angular Component structure. We will never actually use the codes that we will see a little later, Angular CLI will automatically prepare them for us when setting up a project. But let’s examine our first component to understand the structure a little better.

let’s build a project first

ng new ExampleAngularProject

The construction of our first project is being prepared with the code line in the example.

then the system asks us if there is a routing structure and we say “yes” but we will not use it yet.

Then the style selector we should use to style it asks and we choose css for now

and the project is being built…

The project is built and now we can inspect the component structure.

We will make almost all the developments related to our project in the SRC folder. Angular created us a main module called (app.module.ts). We will develop our project under this module. All the components we created will be rendered into the <app-root></app-root> element in index.html.

Now I will try to explain the structure in detail via the app.component.ts file.

import { Component } from ‘@angular/core’;

Decorator the component structure from @angular/core .

Decorator: It is a Typescript property. Basically, it is a classic javascript function and when we use it with the @ sign, it passes as a decorator and references the function it belongs to.

Component Function:The component takes a parameter into the function and we need to give information about the component we will create.

import { Component } from "@angular/core";@Component(
@Component(    
{}
)

Selector:It allows us to use our selector component inside html tags. like <div> , <span>

import { Component } from "@angular/core";@Component(
@Component(    
{
        selector: "app-root", 
       
    }
)
export class AppComponent{}

Templateurl: This is the field where I specify which html file our component will render.

import { Component } from "@angular/core";@Component(
@Component(   
 {
        selector: "app-root", 
        templateUrl: "app.component.html"
    }
)
export class AppComponent{}

StyleUrls: This is the area where we determine which css file our component will render.

import { Component } from "@angular/core";@Component(
@Component(   
 {
        selector: "app-root", 
        templateUrl: "app.component.html",
        styleUrls:"app.component.css"
  }
)
export class AppComponent{}

We have come to the end of the review of the component structure. In my next article, we will examine the modular structure in angular.