source: trip-planner-front/src/app/locations-form/locations-form.component.html@ fa375fe

Last change on this file since fa375fe was fa375fe, checked in by Ema <ema_spirova@…>, 3 years ago

adding new components

  • Property mode set to 100644
File size: 1.8 KB
RevLine 
[fa375fe]1<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
2
3<form class="example-form">
4 <label><h5>Please select a place</h5></label>
5 <mat-form-field class="example-full-width" appearance="fill">
6 <mat-label>Please select a place</mat-label>
7 <input type="text"
8 placeholder="Pick one"
9 aria-label="Place"
10 matInput
11 [formControl]="myControl"
12 [matAutocomplete]="auto">
13 <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
14 <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
15 {{option.name}}
16 </mat-option>
17 </mat-autocomplete>
18 </mat-form-field>
19
20 <h5>Who are you travelling with? </h5>
21 <mat-form-field appearance="fill" class="example-full-width">
22 <mat-label>Please select a companion</mat-label>
23 <mat-select [disabled]="disableSelect.value">
24 <mat-option value="option1" *ngFor="let companion of companions">{{companion.type}}</mat-option>
25 </mat-select>
26 </mat-form-field>
27
28 <h5>How many days are you willing to stay ?</h5>
29 <mat-form-field class="example-full-width" appearance="fill">
30 <mat-label>Please select a number of days</mat-label>
31 <input matInput placeholder="No. Dys" type="number">
32 </mat-form-field>
33
34 <h5>What are your priorities to visit?</h5>
35 <mat-chip-list selectable multiple>
36 <mat-chip #c="matChip" color="accent" selected *ngFor="let category of categories"
37 (click)="toggleSelection(c)">
38 <mat-icon *ngIf="c.selected">check</mat-icon>
39 {{category.name}}
40 </mat-chip>
41 </mat-chip-list>
42 <button mat-raised-button color="primary">Create my planner</button>
43</form>
Note: See TracBrowser for help on using the repository browser.