File
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Constructor
constructor(modalCtrl: ModalController, appVersion: AppVersion)
|
|
|
Parameters :
| Name |
Type |
Optional |
| modalCtrl |
ModalController
|
No
|
| appVersion |
AppVersion
|
No
|
|
|
preferenceData
|
Type : any
|
|
|
|
userName
|
Type : string
|
Default value : ''
|
|
|
Methods
|
changePreference
|
changePreference()
|
|
|
|
|
|
Public
appLabel
|
Type : string
|
Default value : ''
|
|
|
import { Component, Input} from '@angular/core';
import { ModalController } from '@ionic/angular';
import { AppVersion } from '@ionic-native/app-version/ngx';
@Component({
selector: 'app-sb-preferences-popup',
templateUrl: './sb-preferences-popup.component.html',
styleUrls: ['./sb-preferences-popup.component.scss']
})
export class SbPreferencePopupComponent {
@Input() public userName = '';
@Input() public preferenceData;
public appLabel = '';
constructor(
private modalCtrl: ModalController,
private appVersion: AppVersion
) {
this.appVersion.getAppName().then((appName: any) => {
this.appLabel = appName;
});
}
changePreference() {
this.modalCtrl.dismiss({ showPreference: true });
}
}
<div class="preference-container">
<div class="preference-username">
{{userName}}
</div>
<div class="preference-message">
<div class="preference-label pb-8">
<span class="pr-16">{{'YOUR_PREFERENCES' | translate}}</span>
<hr>
</div>
<div class="pb-8">{{'BROWES_RELEVANT_CONTENT' | translate: {'app_name': appLabel} }}</div>
<div class="preference-label">
<hr>
</div>
</div>
<div class="preference-data" *ngIf="preferenceData">
<ng-container *ngFor="let data of preferenceData">
<div class="pb-8" *ngIf="data?.list?.length">
<div class="preference-title">{{data.name}}</div>
<app-truncated-ellipsis
[arrayList]= "data.list"
[showCount]="200"
[separatorText]="', '">
</app-truncated-ellipsis>
</div>
</ng-container>
</div>
<div class="change-preference">
<button class="sb-btn sb-btn-md sb-btn-primary" (click)="changePreference()">{{'CHANGE_PREFERENCE' | translate}}</button>
</div>
</div>
.preference-container {
color: var(--app-gray);
padding: 1rem;
font-size: 0.75rem;
.preference-username {
font-size: 1.5rem;
font-weight: bold;
margin: 0.75rem 0;
}
.preference-message {
.preference-label{
color: var(--app-gray);
display: flex;
align-items: center;
hr{
flex: 1;
background-color: var(--app-primary-header);
}
}
}
.preference-data {
margin: 0.25rem 0 1rem;
}
.change-preference{
text-align: center;
button{
font-size: 0.75rem !important;
}
}
}
Legend
Html element with directive