title: Angular 6: mat-toolbar and mat-toolbar-row in footer (shared) component is not displaying properly (but without any error)?
body: <p>I have read all the similar questions while writing this post but couldn't find the solution in that list.</p>
  
  <p>I searched in following links but couldn't find the solution:</p>
  
  <p><a href="https://stackoverflow.com/questions/50641359/angular-material-v6-mat-footer-cannot-read-property-template-of-undefined">Angular Material v6 Mat-Footer - &quot;Cannot read property &#39;template&#39; of undefined&quot;</a></p>
  
  <p><a href="https://stackoverflow.com/questions/52012867/angular-6-mat-table-and-footer-without-page-scroll">Angular 6 mat-table and footer without page scroll</a></p>
  
  <p><a href="https://stackoverflow.com/questions/52105095/angular-6-mat-button-toggle-is-not-a-known-element">Angular 6 &#39;mat-button-toggle&#39; is not a known element</a></p>
  
  <p><a href="https://stackoverflow.com/questions/50149672/mat-toolbar-is-not-a-known-element-angular-5">&#39;mat-toolbar&#39; is not a known element - Angular 5</a></p>
  
  <p><a href="https://stackoverflow.com/questions/44594726/how-to-target-md-toolbar-row-element-in-md-toolbar">How to target md-toolbar-row element in md-toolbar</a></p>
  
  <p>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.</p>
  
  <p>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. ("</p>
  
  <p>then i added CUSTOM_ELEMENTS_SCHEMA  in the following footer and exception was gone.</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>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.</p>
  
  <p>My footer component is :</p>
  
  <pre><code>    &lt;footer class="app-footer"&gt;
    &lt;div class="app-footer-link"&gt;
      &lt;p&gt;
        &lt;span&gt;VAA&lt;/span&gt; &amp;copy; {{getYear()}}
        &lt;a href="https://www.VAA.com" target="_blank"&gt;www.VAA.com&lt;/a&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;mat-toolbar color="primary"&gt;   
      &lt;mat-toolbar-row&gt;
        &lt;span&gt;Custom Toolbar&lt;/span&gt;
      &lt;/mat-toolbar-row&gt;
      &lt;mat-toolbar-row&gt;
        &lt;span&gt;Second Line&lt;/span&gt;
        &lt;span class="example-spacer"&gt;&lt;/span&gt;
        &lt;mat-icon class="example-icon"&gt;verified_user&lt;/mat-icon&gt;
      &lt;/mat-toolbar-row&gt;
  
      &lt;mat-toolbar-row&gt;
        &lt;span&gt;Third Line&lt;/span&gt;
        &lt;span class="example-spacer"&gt;&lt;/span&gt;
        &lt;mat-icon class="example-icon"&gt;favorite&lt;/mat-icon&gt;
        &lt;mat-icon class="example-icon"&gt;delete&lt;/mat-icon&gt;
      &lt;/mat-toolbar-row&gt;
    &lt;/mat-toolbar&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>Moreover, i have imported the MaterialModule in Shared.module.ts and shared module is imported in app.module.ts.</p>
  
  <p>I am calling this footer on App.Component.html and mat-toolbar is working perfectly on App.Component.html.</p>
  
  <p>see the call on App.Component.html.</p>
  
  <pre><code> &lt;mat-sidenav-content&gt;
        &lt;div fxLayout="column" fxFill&gt;
          &lt;div id="mainContent" fxFlex&gt;
            &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;/div&gt;
          &lt;app-footer&gt;&lt;/app-footer&gt;
        &lt;/div&gt;
      &lt;/mat-sidenav-content&gt;
    &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>This is the theme effect logic :</p>
  
  <pre><code>   @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);
          }
      }
  }
  </code></pre>
  
  <p>I want to display this example as it is :
  please see through this URL : <a href="https://material.angular.io/components/toolbar/examples" rel="nofollow noreferrer">https://material.angular.io/components/toolbar/examples</a></p>