Angular 7 Components

Angular 7 Components
Techiio-author
Written by Sagar RabidasJanuary 13, 2022
8 min read
Angular
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Techiio-author
Sagar Rabidas

Software Developer

In this blog, we will discuss Angular 7 Components

Angular 7 Components:-

In angular everything is a component. Additives are the maximum critical feature of angular. Our whole angular utility is built with the use of distinctive components. The idea behind our angular software is to build components. The issue is a reusable component, it also makes our software clean to preserve and scalable. The component is not anything but a class this is used to have interaction with the HTML display on the browser.

Syntax:

ng generate component (component_name)

Example of Angular 7 Components

Given below is the example of Angular 7 Components:

Example:

ng generate component_one

Now open the command prompt in-app directory of your project and run one of the above commands.

Output:

blogpost

blogpost

Generated File

  1. component-one.component.ts
  2. comp1.component.css
  3. component-one.component.spec.ts
  4. component-one.component.html

We have generated our component which will consist of 4 files listed below:

  • component-one/component-one.component.ts

This file is the component class with the name ComponentOneComponent written in typescript. This class implements OnInit and contains method ngOnInit by default.

File: component-one.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-component-one',
templateUrl: './component-one.component.html',
styleUrls: ['./component-one.component.css'] })
export class ComponentOneComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
  • component-one/comp1.component.css

This file is empty.

This is a CSS file in which we can place the CSS that we want to apply.

  • component-one/component-one.component.spec.ts

This file is a typescript file that is used for testing purposes. This file is an option its presence is not necessary.

File : component-one.component.spec.ts:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ComponentOneComponent } from './component-one.component';
describe('ComponentOneComponent', () => {
let component: ComponentOneComponent;
let fixture: ComponentFixture<ComponentOneComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ComponentOneComponent ] })
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ComponentOneComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
  • component-one/component-one.component.html

This file is written in HTML. which is used to display data to the user. It will contain the HTML code, how the page will look like.

File: component-one.component.html
<p>component-one works!</p>
Root directory files and structure
  1. app.component.css
  2. app.component.html
  3. app.component.spec.ts
  4. app.component.ts
  5. app.module.ts
  6. app-routing. module

Now angular CLI also adds the routing file for us.

These are the files that are created by default by the angular CLI when we create our angular project.

  • app.module.ts

This file will incorporate the library and different matters. If we look nearer into the file it additionally contains one access for our newly generated file i.E. Componentonecomponent. We also want to claim this newly created element into the declarations array. However, for now, it's miles already performed.

File:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ComponentOneComponent } from './component-one/component-one.component';
@NgModule({
declarations: [
AppComponent,
ComponentOneComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent] })
export class AppModule { }

Now we can test our application. One more thing app component is the parent component and all other components that we add later are the child component.

Hence we can say the app is the parent component for all other components. When we run our application for the first time it will run on the 4200 port URL: “http://localhost:4200/” this will first execute our index.html file.

File: index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular7Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

This is the normal HTML file that is generated by the angular. But this file contain one tag i.e. <app-root></app-root> this tag has the reference in the main.ts.

We will see main.ts below.

File main.ts:

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err =>console.error(err));

Here in main.ts, we have AppModule imported and in the bootstrap module as well we have defined it. So it is making the AppModule get loaded when we first invoke the angular application.

main.ts is the entry point for angular application which contains the parent “app module”. This “app module” will further contain the child module to get loaded.

We have an entry of our new component into the app module.

  • app.component.ts

This file is also generated by angular by default. AppModule also has entry into app.module.ts. This is the file that contains the selector definition here which is written oinindex.html.

i.e

To class must have @Component annotation on it.

This also contains various property like:

  1. selector: We need to specify a unique name for this. Which will act as a unique tag for this html page.
  2. templateUrl: Path of you HTML you want to render.
  3. styleUrls: It is an array CSS file path

File:

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] })
export class AppComponent {
title = 'angular7-demo';
}

Angular
AngularJs
Angular 7 Components
Angular7
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Was this blog helpful?
techiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plan
You must be Logged in to comment
Code Block
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance