Hey, has anyone built an apply (submit) style of select component?
I've a multi select that I'd like to only take on apply, rather than as each option is selected.
It feels oddly complex to implement, like I have to maintain a selected field on each option and then apply them on submit?
@talamaska
Hi ppl, I just upgraded my app to angular 10
so far so good
there is one lint warning and a deprecation notice that I'm not sure how to resolve
it seems PortalInjector was deprecated
I'm not really sure how to migrate this snippet
private createInjector(config: ModalConfig, dialogRef: ComponentModalRef): PortalInjector {
const injectionTokens = new WeakMap();
injectionTokens.set(ComponentModalRef, dialogRef);
injectionTokens.set(COMPONENT_MODAL_DATA, config.data);
return new PortalInjector(this.injector, injectionTokens);
}to use Injector.create
1 reply
<mat-form-field appearance="outline" class="example-full-width">
<mat-label>Service Charges</mat-label>
<mat-select placeholder="Service Charge" [formControl]="serviceCharges" multiple>
<mat-select-trigger>
<mat-chip-list>
<mat-chip *ngFor="let charge of serviceCharges" [removable]="true" (removed)="onServiceChargeRemoved(charge)">
{{ charge.rate }}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</mat-select-trigger>
<mat-option *ngFor="let serviceCharge of serviceChargeLists" [value]="serviceCharge.rateId" [rate]="serviceCharge.rate">
<span>{{serviceCharge.activityDesc}}</span>
<span class="float-right">({{serviceCharge.rate}})</span>
</mat-option>
</mat-select>
</mat-form-field>
Question: Is there any way to track the Q4 goals that were stated on the README?
https://github.com/angular/components#what-were-working-on-now-q4-2020
In particular I'm curious about the new density theming api: "Introduce a new theming API for component density, a top feature request."
Hi everyone, we have a somewhat annoying issue: We use Google's Material Icon font with ligatures. Something like: <mat-icon>play_circle_filled</mat-icon>. While ligatures are a cool feature to have a fallback for something like a "Home" icon, where the browser would show the word "home" instead of the icon if the font cannot be loaded, it causes problems for us: For one, we rarely use icons alone, we have accompanying labels along the icons, so we don't really need the main feature of using ligatures. But it's worse than just not needing it: if fonts cannot be loaded, we end up with huge and ugly text across our application that isn't even that intuitive (like "play_circle_filled" is more confusing to normal users than having no icon at all). But the worst part is: Google has started indexing these ligatures from our main menu at the top of the page. So search results now contain: "play_circle_filled mail_outline ..." and other stuff that really hasn't anything to do with our content.
Is there a way to use <mat-icon> so that:
- Nothing shows if the icon CSS and/or font cannot be loaded for whatever reason, and
- Google doesn't "see" the ligatures as content (that could be solved e.g. by allowing us to select the icon using an element attribute instead of its text body)
<html>, <body> or maybe your <app> to enable the ligatures.
