### File

`src/app/shared/state-label/state-label.component.ts`

### Implements

`OnInit`

### Metadata

selector | `hi-state-label`
styleUrls | `./state-label.component.scss`
templateUrl | `./state-label.component.html`

### Index

###### Methods
ngOnInit
###### Inputs
isReady state

### Constructor

`constructor()`
Defined in src/app/shared/state-label/state-label.component.ts:10

### Inputs

isReady
Type : `boolean`
Defined in src/app/shared/state-label/state-label.component.ts:10

state
Type : `string`
Defined in src/app/shared/state-label/state-label.component.ts:9

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/shared/state-label/state-label.component.ts:14
Returns : `void`

    import { Component, OnInit, Input } from '@angular/core';

    @Component({
      selector: 'hi-state-label',
      templateUrl: './state-label.component.html',
      styleUrls: ['./state-label.component.scss'],
    })
    export class StateLabelComponent implements OnInit {
      @Input() state: string;
      @Input() isReady: boolean;

      constructor() {}

      ngOnInit() {}
    }

    <!--
      ~ Licensed to the Apache Software Foundation (ASF) under one
      ~ or more contributor license agreements.  See the NOTICE file
      ~ distributed with this work for additional information
      ~ regarding copyright ownership.  The ASF licenses this file
      ~ to you under the Apache License, Version 2.0 (the
      ~ "License"); you may not use this file except in compliance
      ~ with the License.  You may obtain a copy of the License at
      ~
      ~     http://www.apache.org/licenses/LICENSE-2.0
      ~
      ~ Unless required by applicable law or agreed to in writing,
      ~ software distributed under the License is distributed on an
      ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
      ~ KIND, either express or implied.  See the License for the
      ~ specific language governing permissions and limitations
      ~ under the License.
      -->

    <span
      [ngClass]="{
        'state-label': true,
        'state-label-ready': isReady,
        'state-label-not-ready': isReady == false
      }"
    >
      {{ state || 'NO STATE' }}
    </span>

`./state-label.component.scss`

    @use '@angular/material' as mat;

    .state-label {
      font-size: 12px;
      padding: 4px;
      border-radius: 6px;
      border: 1px solid rgb(0, 0, 0);
      margin-right: 10px;
    }

    .state-label-ready {
      border-color: mat.get-color-from-palette(
        mat.define-palette(mat.$blue-palette),
        darker
      );
    }

    .state-label-not-ready {
      border-color: mat.get-color-from-palette(
        mat.define-palette(mat.$grey-palette, 900, 900, 900),
        darker
      );
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""