src/lib/header/language-selector/language-selector.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | rxap-language-selector |
| standalone | true |
| imports |
NgIf
MatFormFieldModule
StopPropagationDirective
MatSelectModule
FormsModule
NgFor
MatOptionModule
KeyValuePipe
|
| styleUrls | ./language-selector.component.scss |
| templateUrl | ./language-selector.component.html |
Properties |
|
| Public Readonly language |
Default value : inject(LanguageSelectorService)
|
import {
KeyValuePipe,
NgFor,
NgIf,
} from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
inject,
} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatOptionModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { StopPropagationDirective } from '@rxap/directives';
import { LanguageSelectorService } from '@rxap/ngx-localize';
@Component({
selector: 'rxap-language-selector',
templateUrl: './language-selector.component.html',
styleUrls: [ './language-selector.component.scss' ],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
NgIf,
MatFormFieldModule,
StopPropagationDirective,
MatSelectModule,
FormsModule,
NgFor,
MatOptionModule,
KeyValuePipe,
],
})
export class LanguageSelectorComponent {
public readonly language = inject(LanguageSelectorService);
}
<ng-template [ngIf]="(language.languages | keyvalue).length">
<div>
<mat-form-field appearance="outline" class="language-selector" rxapStopPropagation>
<mat-label i18n>Select Language</mat-label>
<mat-select (ngModelChange)="language.setLanguage($event)" [ngModel]="language.selectedLanguage">
<mat-option *ngFor="let item of language.languages | keyvalue" [value]="item.key">{{item.value}}</mat-option>
</mat-select>
</mat-form-field>
</div>
</ng-template>
./language-selector.component.scss
.language-selector {
width: calc(100% - 32px);
margin: 0 16px;
::ng-deep {
.mat-form-field-wrapper {
padding-bottom: 0;
.mat-form-field-infix {
padding: 12px 0;
border-width: 6px;
.mat-select-arrow-wrapper {
transform: translateY(0%);
}
}
}
}
}