Here is the way by which we can create your own Custom Component. To create custom component you have already installed necessary stuffs and your basic application is working with default layouts. Also, you have selected your default working folder in Visual Studio Code.
(1) Under your created application, find src, under that create a folder with name of your component like "product"
(2) in product folder, add files .html & .ts like product.html & product.ts
- in product.html file, your html code will reside & in product.ts your code/logic will reside
(3) to bind any property with your newly added component build product.ts with below
import {Component} from '@angular/core';
@Component({
selector:"product",
templateUrl:"./product.html"
})
export class Product{
title: string = "Hello World!";
}
- for selector property, it will be reside under your default "app.component.html" file which will hold your product html data within this tag
- templateUrl, is the path of your html which will render once application get loaded
(4) for your html, you want to bind your "title" property like below
(5) Upto this step we are done with our custom component, but to render/display this to your application, it will be render with following steps
- go to "app.component.html" file, create tag with name "product"
- go to "app.module.ts", import your component with
import { ProductListComponent } from './products/product';
add class name of your component, in our case it is "Product". so add "Product" in "declarations" under @NgModule
Performing above steps will add your custom component to your application and this will show your "Hello World!". Also, the way here is manual by adding files and folders but you can also create same thing with a command for Step-(1) & Step-(2).
Angular Component
(1) Under your created application, find src, under that create a folder with name of your component like "product"
(2) in product folder, add files .html & .ts like product.html & product.ts
- in product.html file, your html code will reside & in product.ts your code/logic will reside
(3) to bind any property with your newly added component build product.ts with below
import {Component} from '@angular/core';
@Component({
selector:"product",
templateUrl:"./product.html"
})
export class Product{
title: string = "Hello World!";
}
- for selector property, it will be reside under your default "app.component.html" file which will hold your product html data within this tag
- templateUrl, is the path of your html which will render once application get loaded
(4) for your html, you want to bind your "title" property like below
{{title}}
- {{}} is the directive used to bind/display your ts object value and it will display there(5) Upto this step we are done with our custom component, but to render/display this to your application, it will be render with following steps
- go to "app.component.html" file, create tag with name "product"
- go to "app.module.ts", import your component with
import { ProductListComponent } from './products/product';
add class name of your component, in our case it is "Product". so add "Product" in "declarations" under @NgModule
Performing above steps will add your custom component to your application and this will show your "Hello World!". Also, the way here is manual by adding files and folders but you can also create same thing with a command for Step-(1) & Step-(2).
Angular Component
