We Keep Coding

My offerflow is Angular11, can't get value 1 or 2 in html

My task: The received value from service 1 or 2, depending on the value, change the styles in the html component. Using the ng-switch directive, I expect to compare the value received from the object with the specified template value. Styles are not applied. The main problem is that the styles are not applied
My component:
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, Self } from '#angular/core';
import { ConfigService, IProductListItem, SliderValueOptions } from 'common-modules';
import { Router } from '#angular/router';
import { debounceTime, filter, takeUntil, tap } from 'rxjs/operators';
import { NgOnDestroy } from '../../core/services/destroy.service';
import { BehaviorSubject } from 'rxjs';
import { OnInit, OnDestroy } from '#angular/core';
#Component({
selector: 'app-product-item',
templateUrl: './product-item.component.html',
styleUrls: ['./product-item.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [NgOnDestroy],
})
export class ProductItemComponent implements OnInit, OnDestroy {
#Input() product: IProductListItem;
#Input() doubleClickEnabled: boolean;
// tslint:disable-next-line:no-output-on-prefix
#Output() onAddToCart = new EventEmitter<any>();
themeProperties: number;
visibility: boolean = false;
constructor(private _router: Router, private _config: ConfigService, #Self() private onDestroy$: NgOnDestroy) {}
ngOnInit() {
this._config.marketplaceConfig.pipe(takeUntil(this.onDestroy$)).subscribe((config) => {
this.themeProperties = config.structure?.theme;
});
}
}
My html:
<mat-card class="card">
<div [ngSwitch]="themeProperties">
<ng-template *ngswitchcase="2">
{{ themeProperties }}
<mat-card id="cardbackground">
<a class="card__link" (click)="redirectToProduct(product)" (dblclick)="doubleClicked(product)">
<div
style="display: none"
class="card__promo"
*ngIf="product.priceWithDiscount && product?.promoIndividual?.percentDiscount"
>
-{{ product?.promoIndividual?.percentDiscount }}%
</div>
<!-- <b2b-modern-image mat-card-image [src]="product.photos[0]"></b2b-modern-image> -->
<img class="mat-card-image" [src]="product.photos" alt="" />
<mat-card-content class="card__content" [class.has-padding-top]="product && product['discount']">
<div class="super-sale">супер скидка</div>
<div *ngIf="product && product['discount']" class="discount">-{{ product['discount'] }}%</div>
<div
*ngIf="product && product.promoIndividual && product?.promoIndividual?.percentDiscount"
class="discount"
>
-{{ product?.promoIndividual?.percentDiscount }}
%
</div>
<ng-template #defaultPrice>
<!-- <span class="price">{{product.price}} ₽</span>-->
</ng-template>
<div class="rating">
<ngx-stars color="#ffd700" [readonly]="true" [initialStars]="product.rating || 0"> </ngx-stars>
<span class="ml-3">{{ product.views || 0 }} отзывов</span>
</div>
<h3 class="name wrap-two-line" [matTooltip]="product?.feed" matTooltipPosition="above">
{{ product | localize: 'name' }}
</h3>
<div class="а">
<div
class="d-flex align-items-center"
*ngIf="product.priceWithDiscount && product.priceWithDiscount != product.price; else defaultPrice"
>
<span class="price old">{{ product.price }}₽</span>
</div>
<p class="price">{{ (product.priceWithDiscount || 0).toFixed(1) }}₽</p>
</div>
</mat-card-content>
</a>
<mat-card-footer class="card__footer">
<a routerLink="/confirm-order" [queryParams]="{ products: product.id }" mat-raised-button color="primary">
Купить сейчас
</a>
<button mat-button color="primary" (click)="addToCart(product)">
<mat-icon>add_shopping_cart</mat-icon>
</button>
</mat-card-footer>
</mat-card>
</ng-template>
</div>
</mat-card>

change component to:
themeProperties$: Observable<number>;
...
ngOnInit() {
this.themeProperties$ = this._config.marketplaceConfig.pipe(map((config) => config.structure?.theme))
}
change template to:
<div [ngSwitch]="themeProperties$ | async">
<ng-container *ngSwitchCase="2">
....
</ng-container>
issues:
casing wrong on ngSwitchCase directive
OnPush change detection not running correctly, async pipe resolves
ng-template doesn't render to DOM. it's a template for use elsewhere. use ng-container instead.

The spelling of the template switch statement is case sensitive, should be *ngSwitchCase.
Also the ng-template does not work in this case, you need to use ng-container
So please change your statements to this layout, and all should work:
<ng-container *ngSwitchCase="2">
also because you are using ChangeDetectionStrategy.OnPush you need to trigger the change detection manually for the ngSwitch.
Here is a working example.
constructor(private _router: Router, private _config: ConfigService, #Self() private onDestroy$: NgOnDestroy, private cdr: ChangeDetectorRef) {}
ngOnInit() {
this._config.marketplaceConfig.pipe(takeUntil(this.onDestroy$)).subscribe((config) => {
this.themeProperties = config.structure?.theme;
this.cdr.detectChanges(); // <=== here, after setting the value
});
}

ionic 2 /3 ; change image src tag when Onclick

I have ionic page that have an image with 100% width and 100% height, I want to change the image source when I click on it.
this is the html source :
<ion-content>
<ion-img class="map" src="img/map.jpg" (click)="changeView()"></ion-img>
<ion-icon class="icon-bonfire" name="ios-bonfire"></ion-icon>
<ion-icon class="icon-heart" name="md-heart"></ion-icon>
<ion-icon class="icon-nuclear" name="md-nuclear"></ion-icon>
<ion-fab top right>
<button ion-fab color="whitecolor"><ion-icon class="calandaricon" name="md-calendar"></ion-icon></button>
</ion-fab>
<ion-fab top left>
<ion-searchbar> </ion-searchbar>
</ion-fab>
<ion-fab bottom right class="fablocate">
<button ion-fab color="whitecolor"><ion-icon class="locateicon" name="md-locate"></ion-icon></button>
</ion-fab>
<ion-fab (click)="ListParrots();" bottom left class="linklist">
<ion-img class="parrot-list-link" src="img/citydirty.jpg"></ion-img>
</ion-fab>
</ion-content>
ts source code is below :
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {ParrotListPage } from '../parrot-list/parrot-list';
/**
* Generated class for the MapPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-map',
templateUrl: 'map.html',
})
export class MapPage {
images: String[] = Array("img//map.jpg", "img/map1.jpg");
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
changeView(){
}
ionViewDidLoad() {
console.log('ionViewDidLoad MapPage');
}
ListParrots(){
this.navCtrl.push(ParrotListPage);
}
}
can some one help please to complete all the function? thank !

Change your template:
<ion-img class="map" [src]="picToView" (click)="changeView()"></ion-img>
And declare a variable in the class:
picToView:string="img/map.jpg"; // always instatiate with a valid value
And changeView:
changeView(){
this.picToView=.....
}
Regards
Tom

how bind md-input to md-slider value angular2

I'm developing an app with Angular 2.0/meteor, and I don't know how to bind an input to md-slider.
Here's the component html :
<div class="panel-body">
<form [formGroup]="filtreForm" #f="ngForm">
<span class="panel-title"> <i class="glyphicon glyphicon-retweet"> Paramétrages 0 </i></span>
<md-slide-toggle>On</md-slide-toggle>
<div *ngFor="let filtre of filtres | async">
<div *ngFor="let filtr of filtre.arguments">
<span class="panel-title" > <i class="glyphicon glyphicon-retweet"> {{filtr.name}} </i></span>
<md-input-container class="example-full-width" >
<input mdInput placeholder="{{filtr.name}}" formControlName="{{filtr.name}}" value="{{filtr.value}}">
</md-input-container>
<md-slider
thumb-label
[min]="'0'"
[max]="'200'"
[value]="filtr.value">
</md-slider>
</div>
</div>
<div class="btn-group people-pager">
<button type="button" class="btn btn-success btn-quirk" (click)="appliquerFiltre()"><i class="fa fa-tencent-weibo Try it"></i> Appliquer ce filtre</button>
</div>
</form>
</div>
Here's the component ts :
import {Component, ViewEncapsulation, OnInit, NgZone, Input} from '#angular/core';
import { Router } from '#angular/router';
import { Meteor } from 'meteor/meteor';
import { Observable } from 'rxjs';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
//Collection import
import { Filtres } from '../../../../both/collections/filtres.collection';
import {Filtre} from "../../../../both/models/filtre.model";
import template from './tpl.dashboard.component.html';
#Component({
selector: 'traitement_par_lot',
encapsulation: ViewEncapsulation.None,
template
})
export class TPLcomponent implements OnInit{
filtres: Observable<Filtre[]>;
filtreForm: FormGroup;
constructor(
private formBuilder: FormBuilder, private router: Router
) {}
ngOnInit(){
this.filtreForm = this.formBuilder.group({
spread:['',Validators.required],
density:['',Validators.required],
curviness:['',Validators.required],
reseed:['',Validators.required],
});
this.filtres = Filtres.find({}).zone();
console.log(this.filtres);
}
appliquerFiltre(){
}
}
This doesn't work. for now i can get the initial value from the slider but it's doesn't change when i slide
Thanks in advance

For update the value while slidering, you can use change or input event of md-slider, and get the current value from it's event.value.
change event will be fired only after the end of you slide.
input event will be fired immediately when the value of slider changes
you can choose the better one for your situation.
take a look at this plunker.

Scroll not working when from Popover

I am using Ionic 2.
I have a page, that scrolls perfectly when I navigate to the page from another page. However, when I navigate to the page from a Popover, the page displays, but I am unable to scroll.
Any ideas please?
Navigate to page from Popover and other page is the same:
this.nav.push(CategoryPage, {
employeeModel: this.employeeModel,
fromSearch: true
});
page:
<ion-header>
<ion-navbar>
<ion-title>{{categoryModel.name}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<center>
<ion-spinner icon="android" *ngIf="loading"></ion-spinner>
<div class="category-text animate-show">
<div class="select-text" *ngIf="getSelected().length === 0">Select the Roles</div>
<p class="item-selected-row" *ngFor="let subcategory of getSelected()">
<img class="item-stable" id="icon-image-{{subcategory.id}}" src="{{subcategory.icon}}" (click)="toggleItem(subcategory)"/>
</p>
</div>
</center>
<ion-row *ngFor="let trio of getTriples()">
<ion-col *ngFor="let item of trio">
<center>
<div class="row responsive-md">
{{ formatSubCategories(item) }}
<img class="item-stable-large" id="icon-image-{{item.id}}" src="{{item.icon}}" (click)="toggleItem(item)"
[class.item-selected]="isSubCategoryModelItemInArray(item) > -1" />
<p>{{item.name}}</p>
</div>
</center>
</ion-col>
</ion-row>
<ion-buttons>
<button (click)="next()" block round class="form-button-text">Next</button>
</ion-buttons>
</ion-content>
popover
import {Component, ViewChild, ElementRef} from '#angular/core';
import {App, PopoverController, NavController, Content, NavParams} from 'ionic-angular';
import {NgForm} from '#angular/forms'
import { MapPage } from '../map/map';
import { CategoryPage } from '../category/category';
import { EmployeeModel } from '../model/employeeModel';
#Component({
template: `
<ion-content padding id="search-popover">
<ion-list>
<ion-row>
<ion-col>
<center>
<div id="pinButton"><button class="search-popover-button" (click)="presentFilterMap()" danger><ion-icon class="search-popover-icon" name="pin"></ion-icon></button></div>
<p>Location</p>
</center>
</ion-col>
<ion-col>
<center>
<div id="pinButton"><button class="search-popover-button" (click)="presentFilterCategories()" primary><ion-icon class="search-popover-icon" name="happy"></ion-icon></button></div>
<p>Sectors</p>
</center>
</ion-col>
</ion-row>
</ion-list>
</ion-content>
`
})
export class SearchPopOverPage {
private nav: NavController = null;
private employeeModel: EmployeeModel = null;
constructor(private navParams: NavParams, nav: NavController) {
this.nav = nav;
this.employeeModel = navParams.get('employeeModel');
}
ngOnInit() {
}
presentFilterMap(event: Event) {
this.nav.push(MapPage, {
employeeModel: this.employeeModel,
fromSearch: true
});
}
presentFilterCategories(event: Event) {
this.nav.push(CategoryPage, {
employeeModel: this.employeeModel,
fromSearch: true
});
}
}

Here is the solution.
presentFilterCategories(event: Event) {
this.viewCtrl.dismiss().then(() => {
this.nav.push(CategoryPage, {
ev: event,
employeeModel: this.employeeModel,
fromSearch: true
})
});
}

angular 2 reusability in ionic 2 with template overriding

I have some angular 2 components that work fine for a web app.
So, I would want to reuse some of them in an ionic 2 application but without rewriting things.
Ionic has special directives, example: lists. I would have liked to be able to reuse my components by "adding" the ionic directives on top of it.
Ionic syntax:
<ion-list>
<ion-item *ngFor="let product of products">
{{product.name}}
</ion-item>
</ion-list>
Example of angular components:
*Main ionic page:
#Component({
template: `
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Products</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<product-list [products]="products"></product-list>
</ion-content>
`,
directives: [ProductListComponent],
providers: [ProductService]
})
export class ProductsPage implements OnInit{
products;
constructor(
private navCtrl: NavController,
private productService:ProductService) {
}
ngOnInit() {
this.productService.all().subscribe(data => {
this.products = data;
});
}
}
A list of products:
#Component({
selector: 'product-list',
template: `
<ul>
<li *ngFor="let product of products">
<product-list-element [product]="product"></product-list-element>
</li>
</ul>
`,
directives: [ProductListElementComponent]
})
export class ProductListComponent {
#Input() products;
}
An element of the list
#Component({
selector: 'product-list-element',
template: `
<div>
<h3>{{product.name}}</h3>
</div>
`
})
export class ProductListElementComponent {
#Input() product;
}
Here in the example, there is no much logic so rewriting the template is ok but in the real case...
I don't know how to handle this, I'm new in angular 2.
I think the beginning of an answer will be to hide less things and expose more peace of the template but maybe someone already done this before.
Maybe like so:
<ion-list>
<ion-item *ngFor="let product of products">
<ion-icon name="leaf" item-left></ion-icon>
<product-list-element [product]="product">
<product-title [title]="product.title"></product-title>
</product-list-element>
</ion-item>
</ion-list>
Thank you in advance :)