TyHeader

This library was generated with Angular CLI version 9.1.12.

Usage

• import { TyHeaderModule } from "testyantra-header"; and add it to the imports array in your corresponding module.
• use component selector <ty-header [headerData]="data">Brand logo</ty-header>
  • Example:
    • in app.module.ts :

        import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
      
        import { AppRoutingModule } from './app-routing.module';
        import { AppComponent } from './app.component';
        import { TyHeaderModule } from 'ty-header';
      
        @NgModule({
          declarations: [
            AppComponent
          ],
          imports: [
            BrowserModule,
            AppRoutingModule,
            TyHeaderModule
          ],
          providers: [],
          bootstrap: [AppComponent]
        })
        export class AppModule { }
      

    • in app.component.html :

        <ty-header [headerData]="data">
          <img src="assets/brand-logo.png" height="30px">
        </ty-header>
      

    • in app.component.ts :

        import { Component } from '@angular/core';
      
        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.css']
        })
        export class AppComponent {
      
          data = {
            leftMenuItems: [
              {
                itemName: 'About',
                itemLink: '/about'
              },
              {
                itemName: 'Technologies',
                subMenuItems: [
                  {
                    itemName: 'Angular',
                    itemLink: '/angular'
                  },
                  {
                    itemName: 'NodeJS',
                    itemLink: '/node'
                  },
                  {
                    itemName: 'Express',
                    itemLink: '/express'
                  },
                  {
                    itemName: 'MongoDB',
                    itemLink: '/mongo'
                  }
                ]
              }
            ],
            rightMenuItems: [
              {
                itemName: 'Technologies',
                subMenuItems: [
                  {
                    itemName: 'Angular',
                    itemLink: '/angular'
                  },
                  {
                    itemName: 'NodeJS',
                    itemLink: '/node'
                  },
                  {
                    itemName: 'Express',
                    itemLink: '/express'
                  },
                  {
                    itemName: 'MongoDB',
                    itemLink: '/mongo'
                  }
                ]
              },
              {
                itemName: 'Services',
                subMenuItems: [
                  {
                    itemName: 'Development',
                    itemLink: '/development'
                  },
                  {
                    itemName: 'Testing',
                    itemLink: '/testing'
                  }
                ]
              },
              {
                itemName: 'Ramesh',
                subMenuItems: [
                  {
                    itemName: 'Profile',
                    itemLink: '/profile'
                  },
                  {
                    itemName: 'Logout',
                    itemLink: 'Logout'
                  }
                ]
              }
            ]
          };
        }