0

enter image description hereI'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>

Improve this question
10
  • try this<body> <div *ngFor="let s of studente"> <div [ngClass]="{'red-background': s.name=='Andrea'}">{{s.name}}</div> </div> </body> Commented Jan 26, 2023 at 11:31
  • let studente: { id: number, name: string} remove let also from start Commented Jan 26, 2023 at 11:32
  • *ngFor="let s of studente" here s contain your object so instead of this <div>{{studente.name}}</div> you need to write <div>{{s.name}}</div> this. and object is accessing on for loop line you can't use it before getting object values Commented Jan 26, 2023 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 Commented Jan 26, 2023 at 11:42
  • i tried but it doesn't work. the page above is displayed (see attachment) Commented Jan 26, 2023 at 11:43

1 Answer 1

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.