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

File

src/app/materials/chat-widget/chat-widget.component.ts

Implements

OnInit

Metadata

selector app-chat-widget
styleUrls ./chat-widget.component.scss
templateUrl ./chat-widget.component.html

Index

Methods

Constructor

constructor(chatWidgetService: ChatWidgetService)
Defined in src/app/materials/chat-widget/chat-widget.component.ts:9
Parameters :
Name Type Optional
chatWidgetService ChatWidgetService No

Methods

ngOnInit
ngOnInit()
Defined in src/app/materials/chat-widget/chat-widget.component.ts:12
Returns : void 
import { Component, OnInit } from '@angular/core';
import { ChatWidgetService } from '../../component/chat-widget';

@Component({
  selector: 'app-chat-widget',
  templateUrl: './chat-widget.component.html',
  styleUrls: ['./chat-widget.component.scss']
})
export class ChatWidgetComponent implements OnInit {
  constructor(private chatWidgetService: ChatWidgetService) {}

  ngOnInit() {
    this.chatWidgetService.open();
  }
}

<mat-card>
  <mat-card-title>speed dial</mat-card-title>
  <mat-card-subtitle>default</mat-card-subtitle>
  <stbui-speed-dial>
    <button mat-mini-fab>
      <mat-icon>search</mat-icon>
    </button>
    <button mat-mini-fab>
      <mat-icon>edit</mat-icon>
    </button>
    <button mat-mini-fab>
      <mat-icon>home</mat-icon>
    </button>
  </stbui-speed-dial>
</mat-card>

<mat-card>
  <mat-card-title>speed dial</mat-card-title>
  <mat-card-subtitle>position: down</mat-card-subtitle>
  <stbui-speed-dial open="true" position="down">
    <button mat-mini-fab>
      <mat-icon>search</mat-icon>
    </button>
    <button mat-mini-fab>
      <mat-icon>edit</mat-icon>
    </button>
    <button mat-mini-fab>
      <mat-icon>home</mat-icon>
    </button>
  </stbui-speed-dial>
</mat-card>

<mat-card>
  <mat-card-title>speed dial</mat-card-title>
  <mat-card-subtitle>position: left</mat-card-subtitle>
  <stbui-speed-dial open="true" position="left">
    <button mat-mini-fab>
      <mat-icon>search</mat-icon>
    </button>
    <button mat-mini-fab>
      <mat-icon>edit</mat-icon>
    </button>
    <button mat-mini-fab>
      <mat-icon>home</mat-icon>
    </button>
  </stbui-speed-dial>
</mat-card>

<mat-card>
  <mat-card-title>speed dial</mat-card-title>
  <mat-card-subtitle>position: right</mat-card-subtitle>
  <stbui-speed-dial open="true" position="right">
    <button mat-mini-fab>
      <mat-icon>search</mat-icon>
    </button>
    <button mat-mini-fab>
      <mat-icon>edit</mat-icon>
    </button>
    <button mat-mini-fab>
      <mat-icon>home</mat-icon>
    </button>
  </stbui-speed-dial>
</mat-card>

./chat-widget.component.scss 

:host {
    display: block;
  }
  
  mat-card {
    margin: 20px;
  }
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""