structure of an angular project file index.html

Question

I'm studying the structure of an angular project. I saw that the index.html file is the only html code that is displayed on the page. How do I view the code related to other html pages? I thought about importing the selector for the file I want to include in the index.html file but it doesn't work for me. I tried to create this exercise that iterates through an array and checks if the first person is called Andrea. If yes, set background color to red. But nothing is displayed on the screen. That is what I wonder all the tags related to the selectors of all the components should be imported into the index.html file?

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

@Component({
  selector: 'app-esercizi',
  templateUrl: './esercizi.component.html',
  styleUrls: ['./esercizi.component.scss']
})
export class EserciziComponent {
studente: any;

}

//ESERCIZIO 2
let studente: { id: number, name: string} [] = [
  {"id": 0, "name": "Andrea"},
  {"id": 1, "name": "Nicola"},
  {"id": 2, "name": "Sabrina"}
]

.red-background {
    background-color: red;
}

<body [ngClass]="{'red-background': studente.name=='Andrea'}">
    <div *ngFor="let s of studente">
        <div>{{studente.name}}</div>
<body>

index.html

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

let studente: { id: number, name: string} remove let also from start — Nisha, Jan 26 '23 at 11:32
*ngFor="let s of studente" here s contain your object so instead of this
{{studente.name}}
you need to write
{{s.name}}
this. and object is accessing on for loop line you can't use it before getting object values — Nisha, Jan 26 '23 at 11:34
anyway i would need to know mostly what i wrote in the question if only the index.html file code is displayed on screen, how do I display the html code related to all other components? Because I would write all the html code inside the index.html file but it is obviously not correct — , Jan 26 '23 at 11:42
i tried but it doesn't work. the page above is displayed (see attachment) — , Jan 26 '23 at 11:43
you don't need to write add code in index.html in angular go to your project and search src folder inside app folder and inside app you will find app.component.html on that file add other components. You don't need to touch index.html. — Nisha, Jan 26 '23 at 11:44
angular work with components create new components and same like this you can add differnet componnet here. — Nisha, Jan 26 '23 at 11:46
in angular go to your project and search src folder inside app folder and inside app you will find app.component.html remove all code there and write this and then check — Nisha, Jan 26 '23 at 11:47
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/251411/discussion-between-pincocarlino-and-nisha). — , Jan 26 '23 at 15:47

Eliseo · Answer 1 · 2023-01-26T12:22:33.460

In Angular, when we take a look to the index we can see a tag that generally is like

<my-app>loading</my-app>
//or
<app-root>loading</app-root>

Angular reemplace this tag by the different components

What is this tag?

In Angular you have in angular.json some like

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  ...
  "projects": {
    "demo": {
      "root": "",
       ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
             ...
            "main": "src/main.ts",
}

See your src/main.ts. There you see

platformBrowserDynamic().bootstrapModule(AppModule)

It's possible you see some like

bootstrapApplication(AppComponent)

If we use platformBrowserDynamic().bootstrapModule(AppModule) we are going to where are defined the AppModule. And you see

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})

That's the "bootstrap" is AppComponent

what it's the selector of the AppComponent? exact: my-app

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

Well, nobody oblige us to use these names

structure of an angular project file index.html

1 Answers1

Linked