Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@angular-material-extensions/select-icon
Advanced tools
Readme
Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here
If you like this project, support angular-material-extensions by starring :star: and sharing it :loudspeaker:
View all the directives and components in action at https://angular-material-extensions.github.io/select-country
<mat-select-icon>
used to display the main component10.x
If Angular Material Design is not setup, just run ng add @angular/material
learn more
Now add the library via the angular schematics
ng add @angular-material-extensions/select-icon
Now install @angular-material-extensions/select-icon
via:
npm install --save @angular-material-extensions/select-icon
If you installed the library via angular schematics, you can skip this step
import { MatSelectIconModule } from '@angular-material-extensions/select-icon';
@NgModule({
declarations: [AppComponent, ...],
imports: [MatSelectIconModule, ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Other modules in your application like for lazy loading import MatSelectIconModule
into your feature module:
<mat-select-icon>
used to display the main component - see the demo examplesoption | bind | type | default | description |
---|---|---|---|---|
icons | Input() | MatSelectIcon[] | - | the icons to display |
value | Input() | MatSelectIcon | - | the selected value |
onIconSelected | Output() | EventEmitter<MatSelectIcon> | - | emits the selected icon as object (see the interface below) |
interface MatSelectIcon {
url: string;
value?: any;
color?: ThemePalette;
tags?: string[]; // todo: 10.2020
}
<mat-select-icon [icons]="icons" (onIconSelected)="onIconSelected($event)"></mat-select-icon>
import { MatSelectIcon } from '@angular-material-extensions/select-icon';
icons: MatSelectIcon[] = [
{
url: 'assets/icons/countrys-flags/lebanon.svg'
// color: 'accent'
},
{
url: 'assets/icons/countrys-flags/germany.svg',
color: 'warn'
},
{
url: 'assets/icons/countrys-flags/italy.svg',
color: 'primary'
},
{
url: 'assets/icons/countrys-flags/france.svg',
color: 'primary'
},
{
url: 'assets/icons/countrys-flags/spain.svg',
color: 'accent'
},
{
url: 'assets/icons/countrys-flags/united-kingdom.svg',
color: 'accent'
}
];
onIconSelected(selectedIcon: MatSelectIcon) {
console.log('selected icon');
}
<mat-select-icon [icons]="icons" [formControl]="selectIconFC"></mat-select-icon>
import { MatSelectIcon } from '@angular-material-extensions/select-icon';
selectIconFC: FormControl = new FormControl();
with selected value
<mat-select-icon [icons]="icons" [formControl]="selectIconDefault"></mat-select-icon>
import { MatSelectIcon } from '@angular-material-extensions/select-icon';
selectIconDefault: FormControl = new FormControl(this.icons[0]);
Build the library
$ npm run build:lib
Serve the demo app
$ npm start
Built by and for developers :heart: we will help you :punch:
This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm
Copyright (c) 2020 Anthony Nahas. Licensed under the MIT License (MIT)
FAQs
<img alt="angular-material-extensions's logo" height="256px" width="256px" style="text-align: center;" src="https://cdn.jsdelivr.net/gh/angular-material-extensions/select-icon@master/assets/angular-material-extensions-logo.svg"
The npm package @angular-material-extensions/select-icon receives a total of 1 weekly downloads. As such, @angular-material-extensions/select-icon popularity was classified as not popular.
We found that @angular-material-extensions/select-icon demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.