Angular 6: mat-toolbar and mat-toolbar-row in footer (shared) component is not displaying properly (but without any error)?

1
votes

I have read all the similar questions while writing this post but couldn't find the solution in that list.

I searched in following links but couldn't find the solution:

Angular Material v6 Mat-Footer - "Cannot read property 'template' of undefined"

Angular 6 mat-table and footer without page scroll

Angular 6 'mat-button-toggle' is not a known element

'mat-toolbar' is not a known element - Angular 5

How to target md-toolbar-row element in md-toolbar

Mat controls are working fine on components but except footer component. I am trying to use Mat-toolbar and mat-toolbar-row in my shared page footer component. I don't know why Toolbar is not displaying properly. At first , i was getting this exception.

Uncaught Error: Template parse errors: 'mat-toolbar-row' is not a known element: 1. If 'mat-toolbar-row' is an Angular component, then verify that it is part of this module. 2. If 'mat-toolbar-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

then i added CUSTOM_ELEMENTS_SCHEMA in the following footer and exception was gone.

import { Component, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
    selector: 'app-footer',
    templateUrl: './footer.component.html',
    styleUrls: ['./footer.component.scss']
})
export class Footer
{
    getYear()
    {
        return new Date().getUTCFullYear();
    }
}

@NgModule({
    exports: [Footer],
  declarations: [Footer],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class FooterModule { }

Now i am not getting any exception in the browser console and my application is working but now not displaying the mat-toolbar and mat-toolbar-row element colors and effect of icons. Application just display the raw data rather then displaying accurately.

My footer component is :

    <footer class="app-footer">
  <div class="app-footer-link">
    <p>
      <span>VAA</span> &copy; {{getYear()}}
      <a href="https://www.VAA.com" target="_blank">www.VAA.com</a>
    </p>
  </div>

  <mat-toolbar color="primary">   
    <mat-toolbar-row>
      <span>Custom Toolbar</span>
    </mat-toolbar-row>
    <mat-toolbar-row>
      <span>Second Line</span>
      <span class="example-spacer"></span>
      <mat-icon class="example-icon">verified_user</mat-icon>
    </mat-toolbar-row>

    <mat-toolbar-row>
      <span>Third Line</span>
      <span class="example-spacer"></span>
      <mat-icon class="example-icon">favorite</mat-icon>
      <mat-icon class="example-icon">delete</mat-icon>
    </mat-toolbar-row>
  </mat-toolbar>
</footer>

Moreover, i have imported the MaterialModule in Shared.module.ts and shared module is imported in app.module.ts.

I am calling this footer on App.Component.html and mat-toolbar is working perfectly on App.Component.html.

see the call on App.Component.html.

 <mat-sidenav-content>
      <div fxLayout="column" fxFill>
        <div id="mainContent" fxFlex>
          <router-outlet></router-outlet>
        </div>
        <app-footer></app-footer>
      </div>
    </mat-sidenav-content>
  </mat-sidenav-container>

This is the theme effect logic :

   @mixin footer-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    app-footer {
        .app-footer {
            background: mat-color($primary);
            color: mat-color($primary, default-contrast);
        }

        .app-footer-link a {
            color: mat-color($primary, default-contrast);
        }
    }
}

I want to display this example as it is : please see through this URL : https://material.angular.io/components/toolbar/examples

1
angularangular6angular-material2

1 Answers

1
votes

That's because you have to import the necessary modules that the components in your custom module are using! See below:

@NgModule({
  imports: [
    CommonModule,
    MatIconModule,
    MatToolbarModule,
    // ...
  ],
  declarations: [
    Footer,
    // ...
  ]
})
export class FooterModule { }