template-base-tv v0.0.2

Project Title

Create a simple library

Component

<lib-header></lib-header>>
<lib-left-sidebar></lib-left-sidebar>
<lib-login></lib-login>
<lib-footer></lib-footer>

Usage

lib-header

Input parameter

logoSrc: String
logined: boolean
itemsMenu: Array[Object]
user: Object

itemsMenu: [{ name: 'LeftNavItem a', url: 'menu1.html' },
            { name: 'LeftNavItem b', url: 'menu2.html' },
            { name: 'LeftNavItem c', url: 'menu3.html' }];

user: { id: 1, name: 'abc', email: 'a@gmail.com', urlAvatar: 'abc.gif' };

lib-left-sidebar

Input parameter

leftNavItems: Array[Object]

leftNavItems: [{ name: 'LeftNavItem 1', url: 'menu1.html' },
                { name: 'LeftNavItem 2', url: 'menu2.html' },
                { name: 'LeftNavItem 3', url: 'menu3.html' }]

lib-login

Output event

loginSumbitResult(result)
--The function will return result true or false--

Example

https://github.com/vanxuanty95/bstar-exercise

app.component.html

<lib-header [logoSrc]='logoSrcPa' [logined]='logined' [itemsMenu]='itemsMenu' [user]='user'></lib-header>
<div class="row">
    <div class="col-2">
        <lib-left-sidebar [leftNavItems]='leftNavItems'></lib-left-sidebar>
    </div>
    <div class="col-10">
        <lib-login (loginSumbitResult)=loginSumbitResult($event)></lib-login>
    </div>
</div>
<lib-footer></lib-footer>

app.component.ts

import { Component } from '@angular/core';
import { User } from './user';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  logoSrcPa = 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png';
  itemsMenu = [{ name: 'Menu 1', url: 'menu1.html' }, { name: 'Menu 2', url: 'menu2.html' }];
  user = new User(1, 'xyz', 'xyz@gmail.com', 'xyz.gif');
  logined = true;

  leftNavItems = [
    { name: 'LeftNavItem a', url: 'menu1.html' },
    { name: 'LeftNavItem b', url: 'menu2.html' },
    { name: 'LeftNavItem c', url: 'menu3.html' }];

    loginSumbitResult(result){
      console.log(result)
    }
}