In the project bellow, I try to respect best practice when use the Oriented Object Programming approach. I saw that nothing is appear on my page; then I’d like to know if is it always a good idea to use private property parameter in the constructor in a angular project ? According to the files bellow, the selector does not show the template.
person.component.ts
import { Component, Inject } from '@angular/core';
type Gender = "Male" | "Female";
@Component({
selector: 'app-person',
templateUrl: './person.component.html',
styleUrls: ['./person.component.css']
})
export class PersonComponent {
constructor(
@Inject(String) private _firstName: string,
@Inject(String) private _lastName: string,
@Inject(String) private _adresse: string,
@Inject(String) private _gender: Gender,
@Inject(String) private _id: string = ""
){
if(!_id || _id === "") this._id = this.createId(this._firstName,this._lastName)
}
get id(): string{
return this._id;
}
set id(value: string){
this._id = value
};
set firstName(value: string){
this._id = value;
}
get firstName(): string{
return this._firstName;
}
set lastName(value: string){
this._lastName = value;
}
get lastName(): string{
return this._lastName;
}
set gender(value: Gender){
this._gender= value;
}
get gender(): Gender{
return this._gender;
}
set adresse(value: string){
this._adresse= value;
}
get adresse(): string{
return this._adresse;
}
private createId(firstNameGiven: string, lastNameGiven: string): string{
if (firstNameGiven.length > 4 && lastNameGiven.length > 3){
let lefttPart: string = firstNameGiven.substring(0,3);
let rigthPart: string = lastNameGiven.slice(0,3)
let randomId = function(max: number){
Math.random() * max;
}
return randomId(10) + lefttPart + randomId(5) + rigthPart;
}
throw new Error("It's impossible to create the Id");
}
}
student.component.ts
@Component({
selector: 'app-student',
templateUrl: './student.component.html',
styleUrls: ['./student.component.css']
})
export class StudentComponent extends PersonComponent implements OnInit {
maListe = [];
title = "Signup form";
/**
*
*/
constructor(
@Inject(String) private _classe: string,
@Inject(String) firstName: string,
@Inject(String) lastName: string,
@Inject(String) adresse: string,
@Inject(String) gender: Gender
) {
super(firstName, lastName, adresse, gender);
}
ngOnInit(): void {
}
set classe(value: string){
this._classe = value;
}
get classe(): string{
return this._classe;
}
addStudent(){
this.maListe.push({
id: this.id,
prenom: this.firstName,
nom: this.lastName,
adresse: this.adresse,
genre: this.gender,
classe: this.classe
});
}
}
student.component.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student - page</title>
</head>
<body>
<div>
<div><h3>{{ title }}</h3><hr></div>
<input type="text" placeholder="Prénom" class="form-control" [(ngModel)]="lastName"><br>
<input type="text" id="nom" placeholder="Nom" class="form-control" [(ngModel)]="firstName"><br>
<input type="text" id="adresse" placeholder="Adresse" class="form-control" [(ngModel)]="adresse"><br>
<select name="" id="genre" class="form-control" [(ngModel)]="gender"><br>
<option value="Masculin">male</option>
<option value="Féminin">female</option>
</select><br>
<select name="" id="classe" class="form-control" [(ngModel)]="classe">
<option value="Préparatoire 1">Classe one</option>
</select> <br>
<button class="btn btn-success" type="button" (click)="inscrireEleve()">Add</button>
<button class="btn btn-danger" type="button">Cancel</button>
</div>
<div class="div" *ngFor="let elem of maListe">
{{elem | json}}
</div>
</body>
</html>
app.component.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2" id="div_left">
<!-- Inscrire un(e) elève -->
<app-student>
</app-student>
</div>
</div>
</div>
</body>
</html>
2
Answers
In your student.component.html you have body and html tags. Simplifying, what angular does, it puts content of your student.component.html in app.component.html. Which means you have 2 body tags and 2 html tags, which is not allowed in html. Just remove those from student component.
Your student.component.html can probably be just like this:
body,headandhtmlshould be only in index.html – that why is called Single Page ApplicationSo
app.component.htmlcould look like this:Are you creating new components with help of IDE / Angular CLI?