### File

`projects/commons/src/lib/elements/search/components/search.component.ts`

### Metadata

selector | `cmn-search`
styleUrls | `./search.component.scss`
templateUrl | `./search.component.html`

### Index

###### Properties
Public text
###### Inputs
hasButton iconLeft label placeholder
###### Outputs
onChange onSearch

### Inputs

hasButton
Type : `boolean`
Defined in projects/commons/src/lib/elements/search/components/search.component.ts:11

iconLeft
Type : `literal type`
Defined in projects/commons/src/lib/elements/search/components/search.component.ts:13

label
Type : `string`
Defined in projects/commons/src/lib/elements/search/components/search.component.ts:10

placeholder
Type : `string`
Defined in projects/commons/src/lib/elements/search/components/search.component.ts:12

### Outputs

onChange
Type : `EventEmitter<string>`
Defined in projects/commons/src/lib/elements/search/components/search.component.ts:18

onSearch
Type : `EventEmitter<string>`
Defined in projects/commons/src/lib/elements/search/components/search.component.ts:17

### Properties

Public text
Type : `string`
Defined in projects/commons/src/lib/elements/search/components/search.component.ts:15

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

    @Component({
        selector: 'cmn-search',
        templateUrl: './search.component.html',
        styleUrls: [ './search.component.scss' ],
    })

    export class SearchComponent {
        @Input() public readonly label: string;
        @Input() public readonly hasButton: boolean;
        @Input() public readonly placeholder: string;
        @Input() public readonly iconLeft: { name: string, size: string };

        public text: string;

        @Output('onSearch') public readonly fireSearch: EventEmitter<string>;
        @Output('onChange') public readonly fireChange: EventEmitter<string>;
    }

    <div class="field"
         [class.is-grouped]="hasButton">
        <p class="control is-expanded"
           [class.has-icons-left]="iconLeft">
            <input class="input"
                   type="text"
                   [(ngModel)]="text"
                   (ngModelChange)="fireChange && fireChange.emit(text)"
                   [placeholder]="placeholder">
            <span class="icon is-left"
                  *ngIf="iconLeft">
                <i class="fas fa-{{ iconLeft.name }} fa-{{ iconLeft.size }}"></i>
            </span>
        </p>
        <p class="control"
           *ngIf="hasButton">
            <button class="button is-primary"
               (click)="fireSearch && fireSearch.emit(text)">
                {{ label }}
            </button>
        </p>
    </div>

`./search.component.scss`

    @import "../../../../assets/styles/settings/_colors";

    :host {
        h1 {
            margin-bottom: 10px;
        }

        h2 {
            margin-top: 0;
            margin-bottom: 20px;
        }

        .field {
            padding: 10px;
            background-color: $white;
            border-radius: 8px;

            .input {
                margin-left: 20px;
                border-color: transparent;
                box-shadow: none;
            }

            .icon {
                font-size: 30px;
                margin-top: -15px;
                margin-left: -15px;
            }
        }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""