View video tutorial
ANGULAR class constructor
ANGULAR
The Angular class constructor is a standard TypeScript structure where object properties are initialized during object creation and dependency injection.
Angular Class Contructor Example
➔ This example shows how class constructor works in Angular.
Create a project by ng new constructor-demo command.
ng new constructor-demo
app.module.ts file
Copy this file content to the target file.
Example
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Copy the code and try it out practically in your learning environment.
Model Class product.ts file
Copy this file content to the target file.
Example
export class Porduct {
//It is good practice to declare a variable with initial value. for example price:number=0;
name: string;
category: string;
price: number;
//example no-arg constructor
// constructor(){
// this.name=''; //default value
// this.category=''; //default value
// this.price=0; //default value
// }
// //example one-arg constructor
// constructor(name: string) {
// this.name = name;
// this.category = '';
// this.price = 0;
// }
//example two-arg constructor
// constructor(name: string,categroy:string) {
// this.name = name;
// this.category = categroy;
// this.price = 0;
// }
//example three-arg constructor
// constructor(name: string,category:string,price:number) {
// this.name = name;
// this.category = category;
// this.price = price;
// }
// //example three-arg constructor with last-one optional-arg
// constructor(name: string,category:string,price?:number) {
// this.name = name;
// this.category = category;
// this.price = 0;
// }
// //example three-arg constructor with all optional-arg with default values set OR Not at the time of variable declaration
constructor(name?: any, category?: any, price?: any) {
this.name=name;
this.category=category;
this.price=price;
}
// //example three-arg constructor with all optional-arg with default values set inside this constructor (if not assigned at the time of variable declaration)
// constructor(name?: string, category?: string, price?: number) {
// //if(name != null){this.name=name;}else{this.name=""}
// this.name = (name != null) ? name : ''
// this.category = (category != null) ? category : "";
// this.price = (price != null) ? price : 0;
// }
// //example three-arg constructor with all optional-arg with default values set inside this constructor (if not assigned OR Not at the time of variable declaration)
// constructor(name?: any, category?: any, price?: any) {
// //if(name != null){this.name=name;}else{this.name=""}
// this.name = (name != null) ? name : ''
// this.category = (category != null) ? category : "";
// this.price = (price != null) ? price : 0;
// }
}
Copy the code and try it out practically in your learning environment.
app.component.ts file
Copy this file content to the target file.
Example
import { Component } from '@angular/core';
import { Porduct } from './porduct';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular example01';
p0:any=new Porduct();
p1:any=new Porduct("name1");
p2:any=new Porduct("name2","cat2");
p3:any=new Porduct("name3","cat3",3);
}
Copy the code and try it out practically in your learning environment.
HTML app.component.html File
Copy this file content to the target file.
Example
{{p0.name}} {{p0.category}} {{p0.price}}
{{p1.name}} {{p1.category}} {{p1.price}}
{{p2.name}} {{p2.category}} {{p2.price}}
{{p3.name}} {{p3.category}} {{p3.price}}
Copy the code and try it out practically in your learning environment.
HTML index.html File
Copy this file content to the target file.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Databinding01</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Copy the code and try it out practically in your learning environment.
Output
Run project by ng serve in command line (from inside project directory).
program output