Error with using Ngu Carousel with Angular 4 - javascript

I am trying to use this carousel (https://github.com/sheikalthaf/ngu-carousel) with Angular 4 but I keep getting this error.
After having all imports in the App module and in the component, I have simplified the the code in the template to this and still error does not go away. Any ideas?
<ngu-carousel [inputs]="carouselOne" (carouselLoad)="myfunc($event)">
<ngu-item NguCarouselItem>
<div>--1--</div>
</ngu-item>
<ngu-item NguCarouselItem>
<div>--2--</div>
</ngu-item>
</ngu-carousel>
Below is the code in the component:
import { Component, OnInit } from '#angular/core';
import { NguCarousel, NguCarouselStore } from '#ngu/carousel';
import { Http } from '#angular/http';
import { FormGroup, FormBuilder } from '#angular/forms'
#Component({
selector: 'app-new-squad',
templateUrl: './new-squad.component.html',
styleUrls: ['./new-squad.component.css']
})
export class NewSquadComponent implements OnInit {
public carouselOne: NguCarousel;
public positions: Array<string> = [];
public players: Array<string> = [];
private form: FormGroup;
ngOnInit() {
console.log("here.........");
this.carouselOne = {
grid: {xs: 1, sm: 1, md: 1, lg: 1, all: 0},
slide: 1,
speed: 400,
interval: 4000,
point: {
visible: true
},
load: 2,
touch: true,
loop: true,
custom: 'banner'
}
}
onmoveFn(data: NguCarouselStore) {
console.log(data);
}
public myfunc(event: Event) {
// carouselLoad will trigger this funnction when your load value reaches
// it is helps to load the data by parts to increase the performance of the app
// must use feature to all carousel
}
public saveSquad(f) {
console.log(f.value);
this.http.post('http://localhost:8080/squads', f.value)
.subscribe(response => {
console.log(response);
})
}
}

Try adding these two buttons,
<button NguCarouselPrev class='leftRs'><</button>
<button NguCarouselNext class='rightRs'>></button>
Looking through the source code for ngu-carousel.component.ts there are several references to nativeElement in ngOnInit(). I'd say the following are most likely the cause the problem
this.rightBtn = this.next.nativeElement;
this.leftBtn = this.prev.nativeElement;
where this.next and this.prev are set by
#ContentChild(NguCarouselNextDirective, { read: ElementRef })
private next: ElementRef;
#ContentChild(NguCarouselPrevDirective, { read: ElementRef })
private prev: ElementRef;

Related

How to customize angular based kendo notification element with close button and some time to autohide

I want to customize angular based kendo notification element with both autohiding time and close button.
here have look around what i have tried till now:->
app-custom-toast.ts:-> it's a common toast component.
import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '#angular/core';
import { someservice } from './someservice.service';
#Component({
selector: 'app-custom-toast',
templateUrl: './custom-toast.component.html',
styleUrls: ['./custom-toast.component.css']
})
export class CustomToastComponent implements OnInit {
#Output() public ignore: EventEmitter<undefined> = new EventEmitter();
toastMessage : string;
constructor(private cdr : ChangeDetectorRef,private gls : someservice) { }
ngOnInit(): void {
this.gls.toastMsgValue.subscribe((data : string)=>{
this.toastMessage = data;
})
}
public ignoreNotification(event: Event): void {
event.preventDefault();
this.ignore.emit();
}
}
custom-toast.component.html:->
<div style="width: 100% !important;">
<span class="message">{{ toastMessage }}</span>
<span class="k-icon my-custom-icon-class" (click)="ignoreNotification($event)"></span>
</div>
now i am trying to display toast message by accessing toastcomponent from different component like below:->
import { someservice } from './someservice.service';
import { CustomToastComponent } from './CustomToastComponent';
#Component({
selector: 'diff',
templateUrl: './diff.component.html',
styleUrls: ['./diff.component.css']
})
export class DiffComponent implements OnInit {
showtoast() {
this.toast("msg1", 5000, 'success');
}
toast(toastMsg: string, toastTiming: number, toastType: "none" | "success" | "warning" | "error" | "info") {
this.someservice.toastMsg.next(toastMsg);
const notificationRef: NotificationRef = this.notificationService.show({
content: CustomToastComponent,
hideAfter: toastTiming,
position: { horizontal: 'center', vertical: 'top' },
animation: { type: 'fade', duration: 400 },
type: { style: toastType, icon: true },
height: 50
});
if (notificationRef) {
notificationRef && notificationRef.content && notificationRef.content.instance.ignore.subscribe(() => notificationRef.hide());
}
}
diff.component.html:->
<button type="button" (click)="showtoast()">show toast</button>
this working perfectly fine but when we try to show toast 2 times with 2 different messages, both toasts having the same messages i know this is because of behavior subject which i am using, I am not able to update messages properly for each toast, any help would be appreciated.
because of behavior subject both error and success type are having same message refer below image
i have some doubts what does this.notificationService.show() function does , if possible share the function definition,

Angular: how set "priority" to HttpClient

Priority hints indicate the relative priority of resources to the
browser. They can enable optimal loading and improve Core Web Vitals.
From https://web.dev/priority-hints/
example with fetch API:
<script>
fetch('https://example.com/', {priority: 'low'})
.then(data => {
// Trigger a low priority fetch
});
</script>
how set "priority" to Angular HttpClient?
I have tried to force a priority setting:
import { HttpClient } from '#angular/common/http';
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<button (click)="makeRequest()">make request</button><br />
<pre>{{ data | json }}</pre>`,
})
export class AppComponent implements OnInit {
data: any;
constructor(private httpClient: HttpClient) {}
ngOnInit(): void {
this.makeRequest();
}
makeRequest() {
this.data = null;
this.httpClient
.get('https://jsonplaceholder.typicode.com/todos/1', {
priority: 'low',
} as any)
.subscribe((result) => (this.data = result));
}
}
online
but doesn't works... priority is always hight
also suggested to angular team https://github.com/angular/angular/issues/45426
You can use like below:
this.http.get<YourConfig>(this.yourConfigUrl, {priority: 'low'});

In Angular why will my Dynamic Tabs / Tab Panes work initially but not after update?

I am currently using version 3.4 of CoreUI for my Angular App and I am attempting to use their Tabs setup.
Currently it works fine if I populate the tabs oninit but if I update them it breaks. The entire purpose of being able to use this is to have a dynamic list of tabs and content in those tabs so I am at a loss for why this wouldn't work.
I made a very dumbed down version below to show what I am trying. Note that the first instance of this._tabs works fine, after my await calls when I update to the second version it fails to display correctly.
HTML
<c-card>
<c-card-header>
Tabs <code><small>nav-underline</small></code>
</c-card-header>
<c-card-body>
<c-tabset class="nav-underline nav-underline-primary">
<c-tablist>
<c-tab *ngFor="let tab of tabs" >
{{tab.header}}
</c-tab>
</c-tablist>
<c-tab-content>
<br>
<c-tab-pane *ngFor="let tab of tabs">
<p>
{{tab.panel}}
</p>
</c-tab-pane>
</c-tab-content>
</c-tabset>
</c-card-body>
</c-card>
Component
import { Component, OnInit } from '#angular/core';
import { FormGroup } from '#angular/forms';
import { DbService, DashCpResult, IssuerGroup } from '../../db.service';
import { ActivatedRoute } from '#angular/router';
import { Router } from '#angular/router';
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
// Arrays
DashCpResults: Array<DashCpResult>;
private _setTab: number;
get setTab() {
return this._setTab;
}
set setTab(value: number) {
this._setTab = value || 0;
}
private _tabs: any[] = [];
public get tabs() {
return this._tabs;
}
constructor(
private DbService: DbService,
private route: ActivatedRoute,
private router: Router,
) {
this.setTab = 0;
}
rungetDashCpResult(id) {
return new Promise((resolve) => {
this.DbService.getDashCpResult(id).subscribe(DashCpResults => this.DashCpResults = DashCpResults,
(err) => {
console.log('ERROR: ' + JSON.stringify(err));
},() => {
resolve(1);
});
})
}
async ngOnInit() {
this._tabs = [
{ header: 'Home', panel: 'Home'},
{ header: 'Home2', panel: 'Home2'},
{ header: 'Home3', panel: 'Home3'},
{ header: 'Home4', panel: 'Home4'}
];
// Get Screen detail for Tabs
try { await this.rungetDashCpResult(1); } catch (e) {console.log(e)}
// Update Tabs for a test
this._tabs = [
{ header: 'Home5', panel: 'Home5'},
{ header: 'Home6', panel: 'Home6'},
{ header: 'Home7', panel: 'Home7'},
{ header: 'Home8', panel: 'Home8'}
];
}
}

Property 'id/name/duration/calories' does not exist on type 'unknown'

import { NgForm } from '#angular/forms';
import { Exercise } from './../exercise.model';
import { TrainingService } from './../training.service';
import { Component, OnInit, ViewChild } from '#angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable, Subscriber } from 'rxjs';
import 'rxjs/add/operator/map';
#Component({
selector: 'app-new-training',
templateUrl: './new-training.component.html',
styleUrls: ['./new-training.component.css'],
})
export class NewTrainingComponent implements OnInit {
exercises: Observable<Exercise[]>;
constructor(
private trainingService: TrainingService,
private db: AngularFirestore
) {}
ngOnInit(): void {
this.exercises = this.db
.collection('availableExercises')
.snapshotChanges()
.map((docArray) => {
return docArray.map((doc) => {
return {
id: doc.payload.doc.data().id,
name: doc.payload.doc.data().name,
duration: doc.payload.doc.data().duration,
calories: doc.payload.doc.data().calories,
};
});
});
}
onStartTraining(form: NgForm) {
this.trainingService.startExercise(form.value.exercise);
}
}
Have issue with id, name, duration, and calories.. they are all underlined and error says: Property does not exist on type 'unknown' for all four. So not sure what the issue is. I have tried as well
id: doc.payload.doc['id'],
name: doc.payload.doc['name'],
duration: doc.payload.doc['duration'],
calories: doc.payload.doc['calories'],
doesn't work as well. Was repeating after Maximilian Schwarzmuller's tutorial. Would appriciate any help.
The answer was to change the next line on the function ngOnInit from:
return docArray.map((doc) => {
Into:
return docArray.map((doc: any) => {
This will allow you to allow you to avoid type checking during compilation. As mentioned here

Dynamic content in Angular 4 not styled

I am using a masonry container and lightbox together to create a gallery page on my site.
<div id="macy-container" style="visibility:none;">
<div *ngFor="let image of _albums; let i=index" [className]="'demo'">
<img [src]="image.src" (click)="open(i)" [className]="'demo-image'" alt=""/>
</div>
</div>
I'm having an issue where if I hard code the images everything works great but as soon as I try to render dynamically the masonry doesn't render. If you try to inspect then the control will render. I've also tried doing a timeout function which will render the control correctly.
I'm realizing that this is basically a race issue. My image data is coming from a service:
getImageData(){
return this.http.get("./assets/eat.json")
.map((res:Response) => res.json().images); //records in this case
}
In the page where I want that data I'm calling the service in my constructor thusly:
import { AppService } from './../core/app.service';
import { EatModule } from './eat.module';
import { Component, OnInit, AfterContentInit } from '#angular/core';
import { Http, Response, Headers, RequestOptions } from '#angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Lightbox } from 'angular2-lightbox';
#Component({
selector: 'app-eat',
templateUrl: './eat.component.html',
styleUrls: ['./eat.component.scss'],
providers: [ AppService ]
})
export class EatComponent implements OnInit, AfterContentInit {
private _album: Array<string> = [];
public _albums:Array<any> = [];
private myJsonData : any;
constructor(private _lightbox: Lightbox,private http: Http, private appService: AppService) {
this.appService.getImageData().subscribe((data) => {
console.log("JSON data is - ", data);
this.myJsonData = data;
for(let result of this.myJsonData){
const album = {
src : result.src,
caption : result.caption,
thumb : result.thumb
}
this._albums.push(album);
}
});
}
Then in my ngOnInit I load my styles for my masonry:
ngOnInit() {
var masonry = new Macy({
container: '#macy-container',
trueOrder: false,
waitForImages: true,
debug: true,
margin: {
x: 10,
y: 10
}
})
}
There aren't any errors and the page renders but doesn't apply the styles to the masonry container. If you inspect the page then the styles magically appear and the page renders correctly.

Categories

Resources