Discussion :

[best01]

Bonjour à tous, je viens à vous pour un problème avec un ngStyle sur une div, j'ai le message d'erreur qui s'affiche sur la console

Can't bind to 'ngStyle' since it isn't a known property of 'div'

Voici mes fichiers :

- la vues :

Code html :

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

  <div [ngStyle]="myStyles">Modification du style avec ngStyle</div>

- le contrôleur

Code :

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
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
 
export class TestComponent implements OnInit {
 
  myStyles = {
    'font-size': '3em',
    'background-color': 'ivory',
    'color': 'maroon'
  }
 
  constructor() { }
 
...

- app.module.ts

Code :

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
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
 
@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Merci pour l'aide que vous pourriez m'apporter à ce problème.

[krakatoa]

Code :

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

1
2
 
  <div [ngStyle]="'myStyles'">Modification du style avec ngStyle</div>

[best01]

Merci de ta réponse, mais toujours le même problème

Can't bind to 'ngStyle' since it isn't a known property of 'div'.
<div [ngStyle]="'myStyles'">Modification du style avec ngStyle</div>

[pfuek]

je viens d'essayer ton code et ça fonctionne très bien en Angular 9

ça fonctionne aussi chez moi (Angular 9)

Code html :

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

<div [ngStyle]="myStyles()">toto</div>

Code :

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

1
2
3
4
5
6
7
8
  myStyles() {
 
    return {
      'font-size': '3em',
      'background-color': 'ivory',
      'color': 'maroon'
    };
  }

[best01]

pfuek j'ai mi le même code que toi ...

Peut être oublier d'importer quelque chose ? J'ai vu que certain ajout

Code :

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

import { CommonModule } from '@angular/common';

dans app.module.ts mais aucun changement ...

[best01]

Je viens de faire le test sur une autre page et là tous marche bien !!! La différences vient du fait que mon composant slider.component (marche pas) est appeler sur le composant main.component ...