Composent header qui ne s'exécute pas
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.
https://zupimages.net/up/22/45/9p7a.png
Par ailleurs, je n'ai aucun message d'erreur sur la console...
https://zupimages.net/up/22/45/0gmg.png
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:
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:
<span>Header Works!!</span>
shared.module.ts
Code:
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:
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:
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:
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. :?:roll:
Merci beaucoup
