Develop Reference

Showing dynamic text in spinner angular material

I have a spinner , but I also want some text in the spinner independent of the component. So for example if you are doing a save action, then the spinner will showing: ...saving. But for example if you do a search action. The spinner will showing: ..processing and so on.
I have this as spinner component:
<div *ngIf="(isLoading | async)" class="overlay">
<div>
<mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value"> </mat-progress-spinner>
<div style="position:relative; top: -60px; left: 30px;">{{message}}</div>
</div>
</div>
and ts script:
export class LoaderComponent {
color = 'primary';
mode = 'indeterminate';
value = 50;
message = 'Hello there';
isLoading: Subject<boolean> = this.loaderService.loaderState;
constructor(private loaderService: LoaderService) {}
}
and then for example I load the spinner in this component: listComponent
<app-loader ></app-loader>
So I see the spinner but not the message.
So what I have to improve so that the text will also been shown?
And how to make the text dynamically? So that you can put any text message in it?
Thank you
I have it now like this:
<div *ngIf="(isLoading | async)" class="overlay">
<div>
<mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value"> </mat-progress-spinner>
<div style="position:absolute; top: -60px; left: 30px;">{{message}}</div>
</div>
</div>
export class LoaderComponent {
color = 'primary';
mode = 'indeterminate';
value = 50;
#Input()
message = 'Hello there';
isLoading: Subject<boolean> = this.loaderService.loaderState;
constructor(private loaderService: LoaderService) {}
}
and this is the css:
.overlay {
position:fixed;
display:block;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(74,74,74,.8);
z-index:99999;
}
.spinner {
margin:auto;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

You can find Working demo here in this StackBlitz Link
You have to use Behavior Subject and service...
Your app.component.html is..
<mat-toolbar color="primary">Spinner Demo</mat-toolbar>
<div style="margin:1em">
<button style="margin:1rem" mat-raised-button color="primary" (click)="spinner('search')">Search</button>
<button mat-raised-button color="primary" (click)="spinner('Send')">Send</button>
<button style="margin:1rem" mat-raised-button color="primary" (click)="spinner('Save')">Save</button>
</div>
<app-search-output ></app-search-output>
Your app.component.ts is...
export class AppComponent {
constructor( private serachService: SearchService){
}
spinner(term){
this.serachService.sendData(term);
}
ngOnInit(){
}
}
Your Service where you can use behaviorSubject as like this...
export class SearchService {
searchData$: BehaviorSubject<object[]> = new BehaviorSubject<object[]>([{}]);
constructor() { }
sendData(term){
this.searchData$.next(term)
}
getData(){
return this.searchData$.asObservable();
}
}
Your spinner component HTML is...
<div style="margin:2em auto; padding:1rem; box-shadow: 1px 2px 7px red; width:50vw">
<span style="margin:1em; padding:1rem">{{bookData$ |async |json}}</span>
<mat-spinner style="margin:1em" color="warn" ></mat-spinner>
</div>
Your spinner.component.ts is ...
export class SearchOutputComponent implements OnInit {
bookData$;
constructor(private searchService: SearchService) { }
ngOnInit() {
this.bookData$ = this.searchService.getData();
}
}

You can pass text values as #Input to your component and use the component as below
I believe you are not able to see it because of css issue. Try making the text position:absolute.
<div *ngIf="(isLoading | async)" class="overlay">
<div>
<mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value"> </mat-progress-spinner>
<div style="position:absolute; top: -60px; left: 30px;">{{message}}</div>
</div>
</div>
To further debug please create a stackblitz.
<app-loader [message] = "Processing"></app-loader>
Spinner Component
import { Component, Input, OnInit } from '#angular/core';
export class LoaderComponent {
color = 'primary';
mode = 'indeterminate';
value = 50;
#Input()
message = 'Hello there'; // Default text will be Hello there but if you pass anything as stated above then it will be replaced.
isLoading: Subject<boolean> = this.loaderService.loaderState;
constructor(private loaderService: LoaderService) {}
}

Try to change style position to relative in your html file it should work:
HTML file
<div *ngIf="(isLoading | async)" class="overlay">
<div>
<mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value"> </mat-progress-spinner>
<div style="position:relative; top: -60px; left: 30px;">{{message}}
</div>
</div>
</div>
TS file
export class ProgressSpinnerOverviewExample {
color = 'primary';
mode = 'indeterminate';
value = 50;
#Input()
message = 'Hello';
isLoading = true;
constructor() {}
}

Angular Kendo Grid

I use Kendo UI for Angular. In the kendo grid I have a problem:
When I add a new record in the grid show 'valueField' instead textField.
How can I change that and set editable mode when new record appears not when click?
myCode:
<kendo-grid [data]="gridData" [loading]="loading" [navigable]="true"
(cellClick)="cellClickHandler($event)" (cellClose)="cellCloseHandler($event)" [height]="300"
(save)="addAddressRecord($event)" (remove)="removeAddressRecord($event)">
<kendo-grid-column field="isPrimary" editor="boolean" title="اصلی" width="50px">
</kendo-grid-column>
<kendo-grid-column field="title" title="عنوان"></kendo-grid-column>
<kendo-grid-column field="geographicalRegionId" title="منطقه جغرافیایی">
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"
let-formGroup="formGroup">
<kendo-combobox (filterChange)="filterGeographicalRegion($event)" [filterable]="true"
[data]="geographicalRegionId" textField="title" valueField="id"
[valuePrimitive]="true" [formControl]="formGroup.get('geographicalRegionId')">
</kendo-combobox>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="addressString" title="آدرس">
</kendo-grid-column>
<kendo-grid-column field="postalCode" title="کد پستی">
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"
let-formGroup="formGroup">
<input kendoTextBox [formControl]="formGroup.get('postalCode')"
(input)="($event)" />
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="phone" title="تلفن">
</kendo-grid-column>
<kendo-grid-column field="fax" title="فاکس">
</kendo-grid-column>
<kendo-grid-column field="email" title="ایمیل">
</kendo-grid-column>
<kendo-grid-column width="50px">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button kendoGridRemoveCommand [icon]="'minus-outline'"></button>
<button kendoGridSaveCommand [icon]="'plus-outline'"></button>
</ng-template>
</kendo-grid-column>
</kendo-grid>

plz try this
create a component for dropdown
in HTML
<div [formGroup]='formGroup'>
<button #anchor (click)="toggle()" class="k-button btn-dropdown">{{ selectedKeys }}</button>
<kendo-popup [anchor]="anchor" (anchorViewportLeave)="show = false" class="popup" *ngIf="show">
<kendo-treeview
#tree
class="dropdown-kendo-treeview"
[nodes]="treeData | async"
textField="name"
kendoTreeViewExpandable
kendoTreeViewSelectable
kendoTreeViewHierarchyBinding
[hasChildren]="hasChildren"
[children]="fetchChildren"
[selectBy]="'name'"
[(selectedKeys)]="selectedKeys"
(selectionChange)="handleSelection($event)"
>
</kendo-treeview>
<div #dropdownIconDiv class="dropdown-icon-div">
<button class="m-1 dropdown-icon" kendoButton title="دریافت اطلاع از تغییرات" (click)="refresh()">
<i class="fas fa-redo"></i>
</button>
<button class="m-1 dropdown-icon" title="افزودن موقعیت جدید" (click)="newGeo()" kendoButton>
<i class="fas fa-plus"></i>
</button>
</div>
</kendo-popup>
<input #input kendoTextBox hidden [formControl]="name"/>
In ts file
#Input() name: FormControl;
#Input() formGroup: FormGroup;
#Input() selectedKeys = ['انتخاب ...'];
#ViewChild('anchor', {static: false}) anchor: ElementRef;
#ViewChild('dropdownIconDiv', {static: false, read: ElementRef}) dropdownIconDiv: ElementRef;
#ViewChild('tree', {static: false, read: ElementRef}) tree: ElementRef;
#ViewChild('input', {static: false}) input: ElementRef;
treeData: Observable<any[]>;
show = false;
#HostListener('keydown', ['$event'])
keydown(event: any): void {
if (event.keyCode === 27) {
this.toggle(false);
}
}
#HostListener('document:click', ['$event'])
documentClick(event: any): void {
if (!this.contains(event.target)) {
this.toggle(false);
}
}
constructor(
private geolocationService: GeolocationService,
private notificationService: NotificationService,
private tabService: TabService
) {
}
ngOnInit() {
this.getParentGeo();
this.getEditData();
}
getEditData(): void {
if (this.name.value) {
this.geolocationService.show(this.name.value).subscribe((response) => {
this.selectedKeys = [response.name];
},
(error) => this.errorHandler(error));
}
}
toggle(show?: boolean): void {
this.show = show !== undefined ? show : !this.show;
}
contains(target: any): boolean {
return this.anchor.nativeElement.contains(target) ||
(this.tree ? this.tree.nativeElement.contains(target) : false) ||
(this.dropdownIconDiv ? this.dropdownIconDiv.nativeElement.contains(target) : false);
}
handleSelection(e): void {
this.name.setValue(e.dataItem.id);
this.show = false;
}
newGeo() {
this.tabService.open(new Tab('معرفی موقعیت جغرافیایی', GeolocationComponent));
}
refresh() {
this.getParentGeo();
}
hasChildren() {
return true;
}
getParentGeo() {
this.treeData = this.geolocationService.SubLocations(0);
}
fetchChildren = (item: any) => {
return this.geolocationService.SubLocations(item.id);
};
showAlert(text: string, type: any): void {
this.notificationService.show({
content: text,
animation: {type: 'fade', duration: 400},
position: {horizontal: 'center', vertical: 'top'},
type: {style: type, icon: true},
closable: false,
hideAfter: 3000
});
}
// {ErrorCode,Message}
errorHandler(error: any) {
this.showAlert(error.error.Message, 'error');
}
in scss file
.btn-dropdown {
width: 190px;
justify-content: left;
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, #000 50%),
linear-gradient(135deg, #000 50%, transparent 50%) !important;
background-position: calc(10% - 0.78rem) 0.5rem, calc(10% - 0.5rem) 0.5rem;
background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
background-repeat: no-repeat;
}
.popup {
width: 190px;
}
.dropdown-kendo-treeview {
width: 190px !important;
height: 200px !important;
}
.dropdown-icon-div {
border-top: 1px solid #00000029;
height: 50px;
width: 100%;
text-align: left;
}
.dropdown-icon {
width: 30px;
height: 30px;
font-size: 16px;
margin: 10px 5px !important;
}
and usage in grid kendo
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"
let-formGroup="formGroup">
<zino-geolocation-tree-dropdown [formGroup]="formGroup" [selectedKeys]="selectedKeys"
[name]="formGroup.get('geographicalRegionId')"></zino-geolocation-tree-dropdown>
</ng-template>

How to solve "Cannot read property 'scrollIntoView' of undefined"?

I want to scroll to a particular div on clicking a button in Angular 7, below is the code I am using but it is working in stackblitz but showing error when i use in my project.
"Cannot read property 'scrollIntoView' of undefined".
https://stackblitz.com/edit/angular-scroll-local-variable?file=src%2Fapp%2Fscroll.component.ts
try this link: https://stackblitz.com/edit/angular-scroll-local-variable-ja96uz?file=src%2Fapp%2Fapp.component.html
<button (click)="scroll(target)"></button>
<div #target>Your target</div>
and in component:
scroll(el) {
el.scrollIntoView();
}

Try angular ViewportScroller Service Which provide scrollToAnchor method
scroll.html
<button (click)="scroll('target')">Click to scroll</button>
<div id="target">Your target</div>
scroll.ts
import { Component, Input } from '#angular/core';
import { ViewportScroller } from '#angular/common';
#Component({
selector: 'scroll',
template: `
<button (click)="scroll('target')">Click to scroll</button>
<div id="target">Your target</div>
`,
styles: [`h1 { font-family: Lato; }`, `div { margin-top: 5000px; }`]
})
export class ScrollComponent {
constructor(private vps: ViewportScroller) {
}
scroll(id) {
this.vps.scrollToAnchor(id);
}
}
Example:https://stackblitz.com/edit/angular-scroll-local-variable-99hwvo

Try using ViewChild:
//HTML
<button (click)="scroll()"></button><div #target>Your target</div>
//ts
//Import
import { ..., ViewChild, ElementRef } from '#angular/core';
//Declare
#ViewChild('target') targetEl: ElementRef;
scroll() {
this.targetEl.nativeElement.scrollIntoView();
}

Scroll.html
<button (click)="scroll()">Click to scroll</button>
<div id="target">Your target</div>
componet.ts
getOffset(el) {
el = el.getBoundingClientRect();
return {
left: el.left + window.scrollX,
top: el.top + window.scrollY,
bottom: el.top + window.scrollY
}
}
scroll() {
var scroll_to = document.getElementById('target');
var topHight = this.getOffset(scroll_to).top;
window.scrollTo(0, topHight);
}

The code is not working because of *ngIf condition, when you use show variable is default set to false, hence the div is not rendered on the component.
The code should be used in a related component where you want to scroll to be done, for example:
if you required in the scroll component then
HTML:
<button (click)="scroll(target)">clicking this button</button>
<div style="marging-top: 100px; height: 900px;"></div>
<div #target *ngIf="show" style="border: 1px solid #000; padding: 10px;margin-top: 10px;">
show get screen scrolled to this div
</div>
TS:
scroll(el: HTMLElement) {
if(el){ // If the div is rendered on the HTML then it should be HTML element
el.scrollIntoView();
}
}
StackBlitz

Angular Material stranger render behavior

I'm using the latest version of Angular and Angular Material. I'm having issues with my components. The page Load like this:
Before de click
And the content just appear when I click on the menu.
After clicking
I already tried to uninstall and install all the meterial stuff. And this issue continues. I have a separate module to import and export all the material components. Here is the code of the component that is using the material tags:
profile.component.ts
import { Component, OnInit } from '#angular/core';
import {AuthService} from "../../services/auth.service";
import {User} from "../../model/model.user";
import {Router} from "#angular/router";
import { Expense } from '../../model/model.expense';
import { ReceiptService } from "../../services/receipt.service";
import { ExpenseService } from './../../services/expense.service';
import { Receipt } from './../../model/model.receipt';
#Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
totalReceita = 0;
totalDespesa = 0;
receipts = []
expenses = []
currentUser: User;
constructor(public authService: AuthService, public router: Router, public receiptService: ReceiptService, public expenseService: ExpenseService) {
this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
}
ngOnInit() {
this.receiptService.getReceipts(this.currentUser.id).subscribe(
data => {
console.log(data)
this.receipts = this.retiraArrayRec(data);
this.somaTudoRec();
}
);
this.expenseService.getExpenses(this.currentUser.id).subscribe(
data => {
this.expenses =this.retiraArrayDesp(data);
this.somaTudoDes();
}
);
console.log(this.receipts)
}
retiraArrayRec(data){
let lista = []
data.forEach(element => {
let receita : Receipt = new Receipt;
receita.name = element[0];
receita.value = element[1]
lista.push(receita);
});
return lista;
}
retiraArrayDesp(data){
let lista = []
data.forEach(element => {
let despesa : Expense = new Expense;
despesa.name = element[0];
despesa.value = element[1]
lista.push(despesa);
});
return lista;
}
somaTudoRec(){
this.receipts.forEach(element => {
this.totalReceita += element.value;
});
}
somaTudoDes(){
this.expenses.forEach(element => {
this.totalDespesa += element.value;
});
}
// login out from the app
logOut() {
this.authService.logOut()
.subscribe(
data => {
this.router.navigate(['/login']);
},
error => {
});
}
}
profile.component.html
<mat-sidenav-container fullscreen class="menu-container">
<mat-sidenav #sidenav>
<mat-nav-list>
<a mat-list-item routerLink="/home" routerLinkActive="active-list-item">
<h2 matLine>Home</h2>
<mat-icon matListIcon>home</mat-icon>
</a>
<a mat-list-item routerLink="/account" routerLinkActive="active-list-item">
<h2 matLine>Receitas</h2>
<mat-icon matListIcon>local_atm</mat-icon>
</a>
<a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">
<h2 matLine>Despesas</h2>
<mat-icon matListIcon>show_chart</mat-icon>
</a>
<a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">
<h2 matLine>Notificações</h2>
<mat-icon matListIcon>notification_important</mat-icon>
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content fxFlexFill>
<mat-toolbar>
<button class="hamburger mat-button" mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
<span>Menu</span>
</button>
<span>Bem vindo ao CPF, Pedro</span>
<button mat-icon-button [mat-menu-trigger-for]="menu">
<mat-icon>more_vert</mat-icon>
</button>
</mat-toolbar>
<mat-menu x-position="before" #menu="matMenu">
<button mat-menu-item>
<mat-icon>person</mat-icon>
<span>Perfil</span>
</button>
<button mat-menu-item>
<mat-icon>money_off</mat-icon>
<span>Sair</span>
</button>
</mat-menu>
</mat-sidenav-content>
</mat-sidenav-container>
profile.component.css
mat-toolbar {
background-image: linear-gradient(to bottom, #00b4db, #0083b0);
color: #fff;
justify-content: space-between;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.3);
}
span {
font-size: 16px;
font-weight: 700;
}
.hamburger {
height: 100%;
font-size: 18px;
}
.mat-sidenav-container {
min-width: 400px;
max-width: 100%;
}
.mat-sidenav {
flex: 0 1 auto;
}
.menu-spacer {
flex: 1;
}
.mat-list-item-content {
padding: 0 25px;
}
.menu-container {
min-width: 200px;
max-width: 100%;
}

First, please consider that you need to insert style into the project:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
If it did not solve the problem, I guess it's because you are using another font and also added !important for the font, please try to add the code below in your style.css (or style.scss) which is the general/public CSS file which effects on your whole project:
mat-icon{
font-family: 'Material Icons' !important;
}

Toggle width & height of image

import { Component, OnInit, ElementRef, Input, ViewChild, Output, EventEmitter } from '#angular/core';
declare var JQuery: any;
export class PresentationComponent implements OnInit {
constructor( public _eleRef : ElementRef,public CommonComponentService:CommonComponentService ) {
}
ngOnInit() {
jQuery(this._eleRef.nativeElement).find('#Fullscreen').on('click',function(){
jQuery('#exampleImage').width(jQuery(window).width());
jQuery('#exampleImage').height(jQuery(window).height());
});
}
}
.slide-control {
z-index: 5;
background-color: #323232;
overflow: hidden;
border: 0;
padding: 0;
width: 100%;
color: #fff;
font-size: 13px;
max-height: 56px;
min-height: 50px;
///text-align: center;
}
.control {
font-size: 20px;
padding: 10px;
cursor: pointer;
}
.slide-control #fullscreen {
float: right !important;
}
.imageArea {
background-color: #e5e5e5;
border: 1px inset #323232;
}
.resize {
width: 100%;
}
<div class="row imageArea">
<div class="mx-auto">
<img [src]="newUrl" id="exampleImage" class="img-fluid" alt="Responsive image">
</div>
<div class="slide-control form-inline">
<div *ngIf="!buttonShowFlag" class="mx-auto">
<span class="control" (click)="back()"><i class="fa fa-arrow-left" aria-hidden="true"></i></span>
<span>{{count+1}} / {{finalCount}}</span>
<span class="control" (click)="next()"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
</div>
<div class="mx-auto" *ngIf="buttonShowFlag">
<button (click)="cfuModal.show()" class="btn">{{'Stepper.Next' | translate}}</button>
</div>
<div class="fullscreen float-right">
<span class="control" id="download" *ngIf="download"></i></span>
<span class="control" id="Fullscreen"><i class="fa fa-arrows-alt text-right" aria-hidden="true"></i></span>
</div>
</div>
</div>
hello i am using angular 2. i am design my own image viewer with custom controls. there is one full-screen button available . i want to make my image to be full-screen on click of that button & when i again click on that button it should go to previous state means i want to make my it toggle. i am embedding jquery in angular 2. when i click on that it makes my image full-screen but how can i make it toggle.

This works for me, pls try
In your html,
<div class="row imageArea">
<button (click)="toggleMe()">Toggle Me</button>
<div class="mx-auto">
<img src="http://gkreading.com/wp-content/uploads/2017/03/awesome-kid-in-the-grass.jpg" id="exampleImage" [ngStyle]="{'width':myWidth,'height':myHeight}"class="img-fluid" alt="Responsive image">
</div>
</div>
In your component.ts file,
export class AppComponent {
private contact:Contacts;
private myWidth:any = 100+"px";
private myHeight:any = 100+"px";
private toggled:boolean = false;
private toggleMe(){
if(this.toggled == false ){
this.myWidth = (window.screen.width) + "px";
this.myHeight = (window.screen.height) + "px";
}else{
this.myWidth = 100 + "px";
this.myHeight = 100 + "px";
}
this.toggled = !this.toggled;
}
}
For getting the screen height and width, you dont want to use any jquery code. Hope this helps.

Instead of jQuery you could bind the height and width of the image with [style.height] and [style.width] as the example:
<img [src]="newUrl" [style.width]="imageWidth" [style.height]="imageHeight" id="exampleImage" class="img-fluid" alt="Responsive image">
and in the button event toggle the size of the image:
btnEventToggle(){
this.flagFullScreen = !this.flagFullScreen;
if(this.flagFullScreen)
{
this.imageHeight = (window.screen.height); //or $window.innerHeight
this.imageWidth = (window.screen.width);
}
else{
this.imageHeight = originalHeight;
this.imageWidth = originalWidth;
}
}
Another option is to bind the element to the angular and treat the element entirely:
<img [src]="newUrl" #imgToggled id="exampleImage" class="img-fluid" alt="Responsive image">
and send the element in the click event: (click)="btnEventToggle(imgToggled)", but it is not advised.