Angular - how to theme my own component using mixin?

Question

I created a component:

message.component.html

<div class="alert">
  <div class="row">
    <!-- add no-gutters to make it narrower -->
    <div class="col-auto align-self-start">
      <!-- or align-self-center -->
      <mat-icon>{{icon}}</mat-icon>
    </div>
    <div class="col">
      <div class="app-message-title">{{title}}</div>
      <div class="app-message-content">
        <ng-content></ng-content>
      </div>
    </div>
  </div>
</div>

message.component.ts

import { Component, OnInit, Input, ElementRef } from '@angular/core';
import { CanColorCtor, mixinColor, CanColor, ThemePalette } from '@angular/material';


// Boilerplate for applying mixins to MessageComponent.
/** @docs-private */
class MessageComponentBase {
  constructor(public _elementRef: ElementRef) { }
}
const _MessageComponentMixinBase: CanColorCtor & typeof MessageComponentBase = mixinColor(MessageComponentBase);


@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.scss']
})
export class MessageComponent extends _MessageComponentMixinBase implements CanColor, OnInit {

  @Input() title: string;
  @Input() icon: string;
  @Input() color: ThemePalette;

  constructor(
    elementRef: ElementRef) {
    super(elementRef);
  }

  ngOnInit() {

  }

}

message.component.css

@mixin app-message-typography($config) {
  .app-message-title {
    font: {
      family: app-font-family($config);
      size: app-font-size($config, body-2);
      weight: 600;
    }

    line-height: app-line-height($config, body-2);
  }

  .app-message-content {
    font: {
      family: app-font-family($config);
      size: app-font-size($config, body-1);
    }
  }
}

@mixin app-message($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  .app-message {
    &.mat-primary {
      color: mat-color($primary);
      background-color: mat-color($primary, 0.15);
    }

    &.mat-accent {
      color: mat-color($accent);
      background-color: mat-color($accent, 0.15);
    }

    &.mat-warn {
      color: mat-color($warn);
      background-color: mat-color($warn, 0.15);
    }
  }
}

display-message.component.html

  <app-message title="Login failed"
               color="warn"
               icon="warning"
               >Test</app-message>

The code compile correctly and I can see the html generated is correct:

<app-message _ngcontent-gus-c16="" class="ng-tns-c16-3 mat-warn" color="warn" icon="warning" title="Login failed" _nghost-gus-c20="" ng-reflect-title="Login failed" ng-reflect-icon="warning" ng-reflect-color="warn">
<div _ngcontent-gus-c20="" class="alert">
    <div _ngcontent-gus-c20="" class="row">
        <div _ngcontent-gus-c20="" class="col-auto align-self-start">
            <mat-icon _ngcontent-gus-c20="" class="mat-icon notranslate material-icons mat-icon-no-color" role="img" aria-hidden="true">warning</mat-icon>
        </div>
        <div _ngcontent-gus-c20="" class="col">
            <div _ngcontent-gus-c20="" class="app-message-title">Login failed</div>
            <div _ngcontent-gus-c20="" class="app-message-content">Test</div>
        </div>
    </div>
</div>

But the style is not correctly applied, the background and text are supposed to be orange (warning color).

How could I applied the style on my component using mixin?

Thanks

Edit:

Following the advice from @Jorge Mussato, I did some adjustements:

themes.scss:

@import './message/message.component.scss';

// Create a theme.
@mixin themes($theme, $config: null) {
  //@include app-message-typography($config); //Not necessary for the moment
  @include app-message-theme($theme);
}

styles.scss

[...]
@import 'src/app/components/themes.scss';
[...]
$primary: ...;
$accent: ..;
$warn: ...;
$theme: mat-light-theme($primary, $accent, $warn);
[...]
@include themes($theme, $typography);

To be sure that the error does not come from my scss, I updated messsage.component.ts with:

@mixin app-message-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  // I added this :
  :host {
    display: block;
    background-color: green;
  }

  [...]
  }
}

the code compiles correctly but I still continue to have theme applied on my component.

Did you call your `@mixin` on your `styles.scss` (or main theme file)? — Jorge Mussato, Dec 23 '19 at 22:03

score 2 · Answer 1 · answered Dec 23 '19 at 22:10

2

You need to declare your mixin in your styles.scss (or main theme file)

styles.scss

...
$config: ...;
$theme: ...;

@import 'path-to-file/message.component.scss';

@include app-message-typography($config);
@include app-message($theme);
...

answered Dec 23 '19 at 22:10

Jorge Mussato

2,266
2
11
19

Thanks, I updated my code following your suggestion, but I continue to not have the css applied to my component. Any Ideas? – Cedric Arnould Dec 23 '19 at 22:52
1

@CedricArnould Could you make a stackblitz? – Jorge Mussato Dec 23 '19 at 22:56
1

You did `@import '~@angular/material/theming';` on your scss files that you are using the material logic, right? – Jorge Mussato Dec 23 '19 at 22:59
I pushed my last modification with the current issue on a git project: https://github.com/ranouf/AllInOneV2/tree/AddMailing/src/client – Cedric Arnould Dec 23 '19 at 23:06
And yes @import '~@angular/material/theming'; is loaded – Cedric Arnould Dec 23 '19 at 23:06
I set the git to public just now, I realized it was private before – Cedric Arnould Dec 23 '19 at 23:17
1

You need to import your `@import '~@angular/material/theming';` in your message component (sorry for the delayed answer) – Jorge Mussato Jan 10 '20 at 01:47
Thanks for your answer, your answer is correct :) Happy new year btw – Cedric Arnould Jan 10 '20 at 18:01

score 1 · Accepted Answer · answered Dec 23 '19 at 23:53

I found a solution, thanks @Jorge Mussato for your help!

In message.component.scss, the good thing to do is (I replaced .app-message by app-message and added .alert):

@mixin app-message-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  app-message {

    &.mat-primary .alert {
      color: mat-color($primary);
      background-color: mat-color($primary, 0.15);
    }

    &.mat-accent .alert {
      color: mat-color($accent);
      background-color: mat-color($accent, 0.15);
    }

    &.mat-warn .alert {
      color: mat-color($warn);
      background-color: mat-color($warn, 0.15);
    }
  }
}

Here is the commit difference: https://github.com/ranouf/AllInOneV2/commit/115194b8ca8d098718efa855275e203ba6d276ac

Angular - how to theme my own component using mixin?

2 Answers2