Discussion :

[Tamzoro]

Bonsoir,

J'ai crée un composent header que j'aimerai utiliser sur la page signin.component.html sauf que l'affichage du header ne s'exécute pas dans la page signin.

Voici dans un premier temps, la structure du petit projet.



Par ailleurs, je n'ai aucun message d'erreur sur la console...



J'ai crée une reproduction sur Stackblitz -> https://stackblitz.com/github/kora13...component.html

Sincèrement, je ne sais pas trop quelle partie du code afficher, je m'excuse si j'affiche trop d'informations:

header.component.css

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
:host {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  height: 60px;
  background-color: #ececec;
}

header.component.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<span>Header Works!!</span>

shared.module.ts

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { RouterModule } from '@angular/router';
 
@NgModule({
  declarations: [
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    CommonModule,
    RouterModule,
  ],
  exports: [
    HeaderComponent,
    FooterComponent
  ]
})
export class SharedModule { }

signin.component.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<header></header>
 
<div class="container">
    <div class="signin">
    <form (ngSubmit)="login()" class="sign-in-form">
    <h2 class="title">Sign in</h2>
    <div class="input-field">
    <i class="fas fa-user"></i>
    <input type="text" name="user" [(ngModel)]="loginForm.user" required maxlength="4" placeholder="Username">
    </div>
    <div class="input-field">
    <i class="fas fa-lock"></i>
    <input type="password" name="password" [(ngModel)]="loginForm.password" required maxlength="4" placeholder="Password">
    </div>
    <input type="submit" value="Login" class="btn">
    <p class="icon-text"> </p>
    <div class="icon-block">
    <a href="#" class="item-icon">
    <i class="fab fa-google"></i>
    </a>
    <a href="" class="item-icon">
    <i class="fab fa-google"></i>
    </a>
    <a href="" class="item-icon">
    <i class="fab fa-google"></i>
    </a>
    </div>
    </form>
    <div class="signin_item_block sign-in-block-form"></div>
 
    </div>
    <div class="panels-container">
    <div class="panel left-panel"></div>
    <div class="panel right-panel">
    <div class="content">
    <h3>Bienvenue sur le site</h3>
    <p>Veuillez choisir votre langue s'il vous plait</p>
    <button class="btn" id="language-btn">Français</button>
    <button class="btn" id="language-btn">Néerlandais</button>
    </div>
    </div>
    </div>
 </div>

identity.module.ts

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@NgModule({
  declarations: [
    IdentityComponent,
    SigninComponent,
 
  ],
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    IdentityRoutingModule
 
  ],
  providers: [
    SessionService
  ]
})
export class IdentityModule { }

app.module.ts

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@NgModule({
  declarations: [
    AppComponent,  
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    IdentityModule,
    HttpClientModule,
    FormsModule,
    NgxsModule.forRoot([SessionState], {
      developmentMode: true
    }),
    NgxsStoragePluginModule.forRoot({
      key: 'session'
    }),
 
  ],
  providers: [
    CanActivateTeam,
    IsActivate,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AppHttpInterceptor,
      multi: true
 
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Si vous avez une solution, je suis vraiment intéressé, car je galère depuis 2 jours.

Merci beaucoup

[dukoid]

* (1)


HeaderComponent

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
@Component({
  selector: 'app-header',      // <---------------------------     selector = le nom de la balise
 
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

SigninComponent.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<header></header>

tu vois bien que le selector (nom de la balise) ne correspond pas à ce que tu as mis dans : HeaderComponent.ts

il faut mettre :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<app-header></app-header>

*(2)
en général, on met une seule fois le header et le footer dans app.component.html
car c'est le composant de base ou les pages sont injectés


app.component.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<app-header></app-header>
 
<router-outlet></router-outlet>   // <-------------- ICI, sont injectés les pages lors de la navigations
 
<app-footer></app-footer>

donc tu auras toujours le header et le footer entre la page qui est injecté sur la balise : <router-outlet></router-outlet>.

[Tamzoro]

Bonjour,

Merci pour tes explications, le problème est résolu.