angular-material-app documentation
  1. Components
  2. BrandComponent

File

src/app/admin/brand/brand.component.ts

Implements

OnInit

Metadata

selector stbui-brand
styleUrls ./brand.component.scss
templateUrl ./brand.component.html

Index

Methods
Inputs

Constructor

constructor()
Defined in src/app/admin/brand/brand.component.ts:10

Inputs

brand
Type : string
Default value : 'Stbui'
Defined in src/app/admin/brand/brand.component.ts:9
link
Type : any
Default value : ['/']
Defined in src/app/admin/brand/brand.component.ts:10

Methods

ngOnInit
ngOnInit()
Defined in src/app/admin/brand/brand.component.ts:14
Returns : void 
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'stbui-brand',
  templateUrl: './brand.component.html',
  styleUrls: ['./brand.component.scss']
})
export class BrandComponent implements OnInit {
  @Input() brand: string = 'Stbui';
  @Input() link: any = ['/'];

  constructor() {}

  ngOnInit() {}
}
Copy
<div class="brand">
  <mat-icon>view_compact</mat-icon>
  <a class="brand-logo" [routerLink]="link">{{ brand }}</a>
</div>
Copy

./brand.component.scss 

:host {
  display: block;
}

.brand {
  position: relative;
  width: 250px;
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  box-sizing: border-box;

  &::before {
    content: 'STBUI';
    position: absolute;
    right: 0;
    bottom: 0;
    color: rgba(255, 255, 255, 0.12);
    font-size: 32px;
  }

  &-logo {
    font-size: 24px;
    font-weight: 500;
    text-decoration: none;
    margin-left: 24px;
    color: #fff;
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""