File
|
foods
|
Type : Food[]
|
Default value : [
{ value: 'steak-0', viewValue: 'Steak' },
{ value: 'pizza-1', viewValue: 'Pizza' },
{ value: 'tacos-2', viewValue: 'Tacos' },
]
|
|
|
|
value
|
Type : string
|
Default value : 'Clear me'
|
|
|
import { Component } from '@angular/core';
import {
MatFormField,
MatLabel,
MatHint,
MatPrefix,
MatSuffix,
MatFormFieldModule,
} from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { MatIcon } from '@angular/material/icon';
import {
MatButtonModule,
MatIconAnchor,
MatIconButton,
} from '@angular/material/button';
import { MatTooltip } from '@angular/material/tooltip';
import { RouterLink } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { MatOption, MatSelect } from '@angular/material/select';
interface Food {
value: string;
viewValue: string;
}
@Component({
selector: 'bgui-forms-fields',
standalone: true,
imports: [
MatFormField,
MatFormFieldModule,
MatLabel,
MatHint,
MatButtonModule,
MatInput,
MatPrefix,
MatSuffix,
MatIcon,
MatIconButton,
MatTooltip,
MatIconAnchor,
RouterLink,
FormsModule,
MatSelect,
MatOption,
],
templateUrl: './forms-fields.component.html',
styleUrl: './forms-fields.component.scss',
})
export class FormsFieldsComponent {
value = 'Clear me';
foods: Food[] = [
{ value: 'steak-0', viewValue: 'Steak' },
{ value: 'pizza-1', viewValue: 'Pizza' },
{ value: 'tacos-2', viewValue: 'Tacos' },
];
}
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<form class="example-form">
<mat-form-field class="w-100">
<mat-label>Company (disabled)</mat-label>
<input matInput disabled value="Google" />
</mat-form-field>
<table class="w-100">
<tr>
<td>
<mat-form-field class="w-100">
<mat-label>First name</mat-label>
<input matInput />
</mat-form-field>
</td>
<td>
<mat-form-field class="w-100">
<mat-label>Long Last Name That Will Be Truncated</mat-label>
<input matInput />
</mat-form-field>
</td>
</tr>
</table>
<p>
<mat-form-field class="w-100">
<mat-label>Address</mat-label>
<textarea matInput placeholder="Ex. 100 Main St">
1600 Amphitheatre Pkwy</textarea
>
</mat-form-field>
<mat-form-field class="w-100">
<mat-label>Address 2</mat-label>
<textarea matInput></textarea>
</mat-form-field>
</p>
<table class="w-100">
<tr>
<td>
<mat-form-field class="w-100">
<mat-label>City</mat-label>
<input matInput placeholder="Ex. San Francisco" />
</mat-form-field>
</td>
<td>
<mat-form-field class="w-100">
<mat-label>State</mat-label>
<input matInput placeholder="Ex. California" />
</mat-form-field>
</td>
<td>
<mat-form-field class="w-100">
<mat-label>Postal Code</mat-label>
<input
matInput
#postalCode
maxlength="5"
placeholder="Ex. 94105"
value="94043" />
<mat-hint>{{ postalCode.value.length }} / 5</mat-hint>
</mat-form-field>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<form class="example-form">
<mat-form-field class="example-full-width">
<mat-label>Telephone</mat-label>
<span matTextPrefix>+1 </span>
<input type="tel" matInput placeholder="555-555-1234" />
<mat-icon matSuffix fontSet="material-symbols-rounded"
>face</mat-icon
>
</mat-form-field>
</form>
<form class="example-form">
<mat-form-field class="example-full-width">
<mat-label>Telephone</mat-label>
<span matTextPrefix>+1 </span>
<input type="tel" matInput placeholder="555-555-1234" />
<button
mat-icon-button
matSuffix
matTooltip="Accent"
color="accent"
aria-label="Example icon-button with a heart icon">
<mat-icon>more_vert</mat-icon>
</button>
</mat-form-field>
</form>
<form>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label"
>Email</label
>
<div class="col-sm-10">
<form class="">
<mat-form-field class="w-100 hpte">
<span matTextPrefix>+1 </span>
<input type="tel" matInput placeholder="555-555-1234" />
<mat-icon matSuffix fontSet="material-symbols-rounded"
>face</mat-icon
>
</mat-form-field>
</form>
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label"
>Password</label
>
<div class="col-sm-10">
<form class="">
<mat-form-field class="w-100 hpte">
<span matTextPrefix>+1 </span>
<input type="tel" matInput placeholder="555-555-1234" />
<mat-icon matSuffix fontSet="material-symbols-rounded"
>face</mat-icon
>
</mat-form-field>
</form>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="gridRadios"
id="gridRadios1"
value="option1"
checked />
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="gridRadios"
id="gridRadios2"
value="option2" />
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input
class="form-check-input"
type="radio"
name="gridRadios"
id="gridRadios3"
value="option3"
disabled />
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="gridCheck1" />
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<form>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label"
>Email</label
>
<div class="col-sm-10">
<form class="">
<mat-form-field class="w-100 hpte">
<span matTextPrefix>+1 </span>
<input type="tel" matInput placeholder="555-555-1234" />
<mat-icon matSuffix fontSet="material-symbols-rounded"
>face</mat-icon
>
</mat-form-field>
</form>
</div>
</div>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label"
>Email</label
>
<div class="col-sm-10">
<mat-form-field class="w-100">
<mat-select>
@for (food of foods; track food) {
<mat-option [value]="food.value">{{
food.viewValue
}}</mat-option>
}
</mat-select>
</mat-form-field>
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label"
>Password</label
>
<div class="col-sm-10">
<form class="">
<mat-form-field class="w-100">
<span matTextPrefix>+1 </span>
<input type="tel" matInput placeholder="555-555-1234" />
<mat-icon matSuffix fontSet="material-symbols-rounded"
>face</mat-icon
>
</mat-form-field>
</form>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="gridRadios"
id="gridRadios1"
value="option1"
checked />
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="gridRadios"
id="gridRadios2"
value="option2" />
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input
class="form-check-input"
type="radio"
name="gridRadios"
id="gridRadios3"
value="option3"
disabled />
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="gridCheck1" />
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<h3>Icon Buttons</h3>
<div class="example-button-row">
<button
mat-icon-button
matTooltip="Basic"
aria-label="Example icon-button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button
mat-icon-button
matTooltip="Primary"
color="primary"
aria-label="Example icon-button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button
mat-icon-button
matTooltip="Accent"
color="accent"
aria-label="Example icon-button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button
mat-icon-button
matTooltip="Warn"
color="warn"
aria-label="Example icon-button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<div matTooltip="Disabled" class="example-disabled">
<button
mat-icon-button
disabled
aria-label="Example icon-button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
</div>
<a
mat-icon-button
matTooltip="Link"
routerLink="."
aria-label="Example icon-button with a heart icon">
<mat-icon>favorite</mat-icon>
</a>
</div>
Legend
Html element with directive