CODEWITHSUNDEEP
htmlangularcomponents
Maxime Michel
Maxime Michel

Reputation: 615

How to display a newly created Component

I am using Angular CLI 7.3.8 with Node 10.12.0. I started by creating a new 'app' using ng new tpangular then moving to that directory and using ng serve --open to launch the app on my computer. I then stopped the execution to create a new component using ng generate component etudiants. So far so good, everything is created and now I want to switch out the app-root for app-etudiants in the index.html file expecting to see the basic text in the etudiants.component.html but nothing happens. No text is displayed.

I've tried cleaning out the etudiants.component.ts file to make it match the app.component.ts expecting a copy-paste method to at least do something but no, nothing works. I've seen people say you need to add a directives attribute to the component which I tried but I got an error saying 'directives' does not exist in type 'Component'.

Here is the index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tpangular</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-etudiants></app-etudiants>
</body>
</html>

etudiants.component.html:

<p>
  etudiants works!
</p>

and etudiants.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-etudiants',
  templateUrl: './etudiants.component.html',
  styleUrls: ['./etudiants.component.css'],
})
export class EtudiantsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

I haven't found any solution and would really like to understand what is going on because I can't see any errors during execution.

Upvotes: 1

Views: 978

Answers (1)

B.Mayssa
B.Mayssa

Reputation: 94

You do not change the app-root , you have to add <app-etudiants></app-etudiants> to the file app.component.html. Try it.

Upvotes: 2

Related Questions