I have limited CSS/SCSS skills but need to change the standard Creative Tim Angular Pro Material template.
Can someone show me examples of what the change needs to be, please? (Whether in the HTML, or many CSS files in the Creative Tim pile).
I'm taking the multi-select drop list code from the same project, from
src/app/forms/extendedforms
from the extendedforms.component.html (lines #49 - 55):
<mat-form-field>
<mat-select multiple placeholder="Multiple Cities" [(ngModel)]="currentCity" name="Paris" ariaLabel="cities[0]">
<mat-option *ngFor="let city of cities" [value]="city.value">
{{ city.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
from the extendedforms.component.ts (lines #27 - 36):
currentCity: string[];
selectTheme = 'primary'; // Irrelevant but left in to show original code
cities = [
{value: 'paris-0', viewValue: 'Paris'},
{value: 'miami-1', viewValue: 'Miami'},
{value: 'bucharest-2', viewValue: 'Bucharest'},
{value: 'new-york-3', viewValue: 'New York'},
{value: 'london-4', viewValue: 'London'},
{value: 'barcelona-5', viewValue: 'Barcelona'},
{value: 'moscow-6', viewValue: 'Moscow'},
];
I'm trying to add the multi-select drop list to the filter panel
src/app/shared/fixedplugin.
to the fixedplugin.component.html replacing (lines #10 - 21) colour buttons:
<a href="javascript:void(0)" class="switch-trigger active-color">
<div class="ml-auto mr-auto">
<span class="badge filter badge-green" data-color="projcycle"></span>
<span class="badge filter badge-purple" data-color="purple"></span>
<span class="badge filter badge-azure active" data-color="azure"></span>
<span class="badge filter badge-green" data-color="green"></span>
<span class="badge filter badge-orange" data-color="orange"></span>
<span class="badge filter badge-danger" data-color="danger"></span>
<span class="badge filter badge-rose" data-color="rose"></span>
</div>
<div class="clearfix"></div>
</a>
with the HTML for the drop list, and then just add the HTML from the extendedforms component to replace the above, and the code into the fixedplugin.component.ts (at line #19 above the constructor).
The src/app/shared/fixedplugin.module.ts also needs the following import (and added to module imports) for the material drop list to work:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../../app.module';
So that the final fixedplugin.module.ts looks like:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FixedpluginComponent } from './fixedplugin.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../../app.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
MaterialModule
],
declarations: [FixedpluginComponent],
exports: [FixedpluginComponent]
})
export class FixedpluginModule { }
The two problems I have are:
1) The "filter component" panel hides when the drop list is expanded on click leaving just the populated list panel visible (both the fixed plugin and top part of drop list hidden).
2) When the drop list fires on-selection-change events each time an item in the list is clicked, how do I trigger a selection event?
The original fixedplugin looks like:
And what I see after my above changes are the correctly displayed drop list before expanding (see left red rectangle and red oval), but the orphaned panel that only shows the drop list contents when expanded (see right side red oval).
All useful help gratefully received.
