File
Metadata
| selector |
cmn-search |
| styleUrls |
./search.component.scss |
| templateUrl |
./search.component.html |
Index
Properties
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
iconLeft
|
Type : literal type
|
|
|
Outputs
|
onChange
|
Type : EventEmitter<string>
|
|
|
|
onSearch
|
Type : EventEmitter<string>
|
|
|
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>
@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 with directive