I want to hide the ngb-tab. When i include the ngb-tab the title tab appears on my table head. Is there any way to hide the ngb-tab ??
import { Component, OnInit } from '#angular/core';
import {faCaretLeft} from "#fortawesome/free-solid-svg-icons";
#Component({
selector: 'app-address-book-container',
templateUrl: './address-book-container.component.html',
styleUrls: ['./address-book-container.component.scss']
})
export class AddressBookContainerComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
This is my html
<div class="container mt-5 ">
<div class="row">
<ngb-tabset>
<ngb-tab >
<ng-template ngbTabContent>
<app-address-book-table></app-address-book-table>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
</div>
You can use the *ngIf statement to hide it, I declared as "false" but you can put a variable boolean in order to change when is true or false.
<div class="container mt-5">
<div class="row">
<ngb-tabset>
<ngb-tab *ngIf="false">
<ng-template ngbTabContent>
<app-address-book-table></app-address-book-table>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
</div>
Related
I am working on an e-commerce app who's front-end is made in Angular 13.
The UI has a sidebar which I do not want to display on the product details page.
For this purpose, in app\app.component.ts I have:
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'E-commerce';
constructor(private router: Router) {}
ngOnInit() {}
/**
* Check if the router url contains the specified route
*
* #param {string} route
* #returns
* #memberof AppComponent
*/
hasRoute(route: string) {
return this.router.url.includes(route);
}
}
In app\app.component.html:
<div class="app-wrapper">
<app-navbar></app-navbar>
<div class="container">
<div class="row my-3">
<div *ngIf="!hasRoute('products/show/:id')" class="col-sm-6 col-md-4 col-lg-3">
<app-sidebar class="app-sidebar"></app-sidebar>
</div>
<div class="col-sm-6 col-md-8 col-lg-9">
<router-outlet></router-outlet>
</div>
</div>
</div>
<app-footer class="app-footer"></app-footer>
</div>
The problem
For a reason I have been unable to understand, this solution fails, and the sidebar is displayed anywhere on the app.
What am I doing wrong?
<div *ngIf="notProductDetails()" class="col-sm-6 col-md-4 col-lg-3">
<app-sidebar class="app-sidebar"></app-sidebar>
</div>
HTML ^^^
constructor() {}
public notProductDetails(): void {
return !window.location.pathname.startsWith('/products/show/');
}
TS
Simply use the window location to pull the pathname instead of injecting the router - remove the constructor injection. Also no need to pass in a prop value there, because you only have a single string you are asserting.
In that way, you are running that value just one time. In order to achieve this you can subscribe to the router events like this:
public showBar: boolean = true;
constructor(private readonly router: Router) {
this.router.events
.pipe(filter((event) => event instanceof NavigationEnd))
.subscribe(({ urlAfterRedirects }: NavigationEnd) =>
this.showBar = this.hasRoute(urlAfterRedirects)
);
}
<div *ngIf="showBar" class="col-sm-6 col-md-4 col-lg-3">
<app-sidebar class="app-sidebar"></app-sidebar>
</div>
In this way, you are updating the showBar value every time the navigation end.
In case someone may find it useful, here is the final solutions I have applied to this problem:
In app\app.component.ts:
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title: string = 'E-commerce';
constructor(private router: Router) {}
ngOnInit() {}
routeIncludesNot(route: string) {
return !window.location.pathname.startsWith(route);
}
}
In app\app.component.html I have:
<div class="app-wrapper">
<app-navbar></app-navbar>
<div class="container">
<div class="row my-3">
<div *ngIf="routeIncludesNot('/products/show/')" class="col-sm-6 col-md-4 col-lg-3">
<app-sidebar class="app-sidebar"></app-sidebar>
</div>
<div [ngClass]="routeIncludesNot('/products/show/') ? 'col-sm-6 col-md-8 col-lg-9' : ''">
<router-outlet></router-outlet>
</div>
</div>
</div>
<app-footer class="app-footer"></app-footer>
</div>
See a "live demo" HERE.
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
});
}
I am working on solution in which i want to append dynamically created component after clicked row
I have table consist rows with action button on click of which i will call angular function and load component after that row.
Here is table code
<div class="row" *ngFor="let rData of reportData; let i = index;" >
<div class="col" >
<button class="btn btn-sm" (click)="loadChildComponent()">+</button>
</div>
<div class="col">Name</div>
<div class="col">Description</div>
<ng-template #dynamic></ng-template>
</div>
Code for dynamic components
Service.ts
import { DynamicComponent } from './dynamic.component'
#Injectable()
export class Service {
factoryResolver;
rootViewContainer;
constructor(#Inject(ComponentFactoryResolver) factoryResolver) {
this.factoryResolver = factoryResolver
}
setRootViewContainerRef(viewContainerRef) {
this.rootViewContainer = viewContainerRef
}
addDynamicComponent() {
const factory = this.factoryResolver
.resolveComponentFactory(DynamicComponent)
const component = factory
.create(this.rootViewContainer.parentInjector)
this.rootViewContainer.insert(component.hostView)
}
}
Here is component file.
dynamic.component.ts
import { Component } from '#angular/core'
#Component({
selector: 'dynamic-component',
template: `<div class="row" >
<div class="col">Data</div>
<div class="col">Data</div>
<div class="col">Data</div>
<div class="col">Data</div>
<div class="col">Data</div>
<div class="col">Data</div>
<div class="col">Data</div>
<ng-template #dynamic></ng-template>
</div>`
})
export class DynamicComponent { }
Functions used to render dynamic component
#ViewChild('dynamic', {
read: ViewContainerRef
}) viewContainerRef: ViewContainerRef
loadChildComponent() {
this.service.setRootViewContainerRef(this.viewContainerRef)
this.service.addDynamicComponent()
}
Right now its appending in same div for any of rows
i would like to append it after clicked row
Please help..
The ng-template in Angular acts like a ghost element i.e. it is never displayed directly. Check this link.
Update:
You are having the template inserted with first row always because you have used #ViewChild. #ViewChild looks for the first element in the template.
Try using #ViewChildren instead.
Refer the following changes:
<ng-container *ngFor="let rData of reportData; let i = index;">
<div class="row">
<div class="col" >
<button class="btn btn-sm" (click)="loadChildComponent(i)">+</button>
</div>
<div class="col">Name</div>
<div class="col">Description</div>
</div>
<div class="row">
<ng-template #dynamic></ng-template>
</div>
</ng-container>
JS changes:
#ViewChildren('dynamic', { read: ViewContainerRef }) viewContainerRef: QueryList<ViewContainerRef>
loadChildComponent(index) {
this.service.setRootViewContainerRef(this.viewContainerRef.toArray()[index])
this.service.addDynamicComponent()
}
Hope this helps :)
I have added particles.js to an Angular 4 project like mentioned here
Json file is being loaded but I don't see particles on screen
In .ts component :
import { Component, Output, ViewEncapsulation, OnInit } from '#angular/core';
import { MnFullpageOptions, MnFullpageService } from 'ngx-fullpage';
declare var particlesJS: any;
#Component({
selector: 'app-root',
encapsulation: ViewEncapsulation.None,
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
#Output() public options: MnFullpageOptions = new MnFullpageOptions({
autoScrolling: true,
controlArrows: false,
});
ngOnInit() {
particlesJS.load('particles-js', 'assets/particlesjs-config.json', console.log('callback - particles.js config loaded'));
}
constructor() { }
}
Html file :
<div id="particles-js" style="border:2px solid black; background-color:red">
<div class="menu-wrapper">
</div>
<div id="content-wrapper" [mnFullpage]="options" [mnFullpageNavigation]="true" [mnFullpageKeyboardScrolling]="true" [mnFullpageSlidesNavigation]="true" mnFullpageSlidesNavPosition="bottom">
<div class="section welcome-section fp-section fp-table ">
<div class="fp-tableCell ">
<div id="presentation" class="example-card" fxLayout="row">
<app-slide-presentation>
</app-slide-presentation>
</div>
</div>
</div>
<div class="section welcome-section fp-section fp-table">
<div class="fp-tableCell">
<div id="formation" class="example-card" fxLayout="row" fxLayoutAlign="center center">
<app-formation>
</app-formation>
</div>
</div>
</div>
<div class="section welcome-section fp-section fp-table">
<div fxLayout="row" class="fp-tableCell " style="height:100%; width:60%; overflow:hidden; margin:auto ; background-color:white ">
<div class="slide" >
<app-competences1>
</app-competences1>
<div class="slide" style="background-color:white">
>
</div>
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</div>
</div>
</div>
</div>
</div>
In console I get callback message :
callback - particles.js config loaded
I have initiated a new project where everything is being working :
in ts component file :
import { Component, Input, Output, OnInit, ViewEncapsulation } from '#angular/core';
declare var particlesJS: any;
#Component({
selector: 'app-root',
encapsulation: ViewEncapsulation.None,
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
ngOnInit() {
particlesJS.load('particles-js', 'assets/particlesjs-config.json', null);
}
}
in html :
<div id="particles-js"></div>
particles are loading perfectly.
I don't see the difference between 2 examples.
Adding "background-color" to 'particles-js' container worked for me.
#home.component.html:
<div id="particles-js"></div>
#home.component.scss:
#particles-js {
height: 100vh;
background-color: black;
}
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.