Hi I've done this filter pipe where I want to look for my imagename and my imageid from all my images, but it just looks for the name and id from the first image.
Anything is wrong on my code aparently.
This is my filter.pipe.ts class where I implement my search method
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(value: any, arg: any): any {
if (arg === '' || arg.length < 1) return value;
const resultPosts = [];
for (const imagen of value) {
if (imagen.name.toLowerCase().indexOf(arg.toLowerCase()) > -1) {
resultPosts.push(imagen);
}else if (imagen.imagenId.toLowerCase().indexOf(arg.toLowerCase()) > -1){
resultPosts.push(imagen);
};
return resultPosts;
}
}
}
My list.component.html where I have my input for searching:
<div class="row">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text"name="filterImagen" placeholder="Search" [(ngModel)]="filterImagen">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Search</button>
</form>
<div class="col-md-4" *ngFor="let imagen of imagenes | filter:filterImagen; index as i">
//when I look for the imagename or imageid, it just looks if my first image has the name I write on the searchbar
<div class="card mb-3 animated zoomIn">
<h3 class="card-header">{{imagen.name}}</h3>
<div class="card-body">
<h5 class="card-title"><b>ID: </b>{{imagen.imagenId}}</h5>
</div>
<div class="card-body text-center">
<img style="height: 200px; width: 100%; display: block;" src="{{imagen.imagenUrl}}" alt="Card image">
</div>
</div>
</div>
</div>
/* On my list.component.ts (here I just have a variable filter declared like: )*/
imagenes: Imagen[] = [];
filterImagen = ''; //just declared it here
//I already imported my FormsModule on app.module.ts and my classes.
Did you remember to add the pipe to Declarations? Or better yet, export it from a module, and import that module into the app.module?
UPDATE - I see your error :)
You have to move return resultPosts out of the for-loop.
If you're interested, I refactored the pipe for clarity:
import { Pipe, PipeTransform } from "#angular/core";
import { Imagen } from "./app.component";
#Pipe({
name: "filter"
})
export class FilterPipe implements PipeTransform {
transform(value: Imagen[], arg: any): any {
if (arg === "" || arg.length < 1) return value;
return value.filter(imagen => imagen.name.toLowerCase().indexOf(arg.toLowerCase()) > -1 ||
imagen.imagenId.toLowerCase().indexOf(arg.toLowerCase()) > -1
);
}
}
Related
I have an input with ngfor, it appears several options
<article *ngIf="layout=='esalpet'" class="filter-group">
<header class="card-header">
<a href="#" data-toggle="collapse" data-target="#collapse_4" aria-expanded="true" class="">
<i class="icon-control fa fa-chevron-down"></i>
<h6 class="title">Marcas</h6>
</a>
</header>
<div class="filter-content collapse show" id="collapse_4">
<div *ngFor="let categ of filtro" class="card-body">
<label class="custom-control custom-radio">
<input (change)="filterMarcas($event)" class="custom-control-input" type="radio" id="5" name="marca"
value="{{categ.marcaJ.marca}}" id="flexCheckChecked" />
<div class="custom-control-label" id="5">{{categ.marcaJ.marca}}</div>
</label>
</div>
<!-- card-body.// -->
</div>
when selecting some of the inputs, I would like only the input selected by the user to appear
follow my method i tried to do
filterMarcas(event){
this.slicedItems = this.slicedItems.filter(item => item.marcaJ?.marca === event.target.value )
console.log(this.slicedItems)
this.filtro = this.slicedItems.filter((record, index) => this.filtro.findIndex(check => check.marcaJ?.marca === record.marcaJ?.marca) === index);
this.peso = this.peso.filter((record, index) => this.peso.findIndex(check => check.peso === record.peso) === index);
}
Is there a better method than this?
this.filtro = this.slicedItems.filter((record, index) => this.filtro.findIndex(check => check.marcaJ?.marca === record.marcaJ?.marca) === index);
Can anyone help me with this ?
Create a new PipeTransform
import { Pipe, PipeTransform } from '#angular/core';
interface Marca {
marcaJ: {
marca: string
}
}
#Pipe({
name: 'marcaFilter'
})
export class MarcaFilterPipe implements PipeTransform {
transform(marcas: Marca[], name: string): Marca[] {
if (!name) {
return marcas;
}
return marcas.filter(marca => marca.marcaJ?.marca === name);
}
}
Declare it within your module.
#NgModule({
...,
declarations: [
...
MarcaFilterPipe,
],
})
export class AppModule { }
And add the pipe to your *ngFor
<div *ngFor="let categ of filtro | marcaFilter: categ.marcaJ.marca">
...
</div>
In Angular i have dynamically created a group of buttons that all have the same action (to show text when clicked) everything works fine yet when I click one button they all perform the action. I need them to work independently of each other. I have dynamically made a different id for each button and was wondering if there was a way to us the id to have them work independently.
Button HTML and TS files:
<button id="{{index}}" class="btn btn-secondary" style="float: right;" (click)="onClick()">Discription</button>
import { Component, EventEmitter, OnInit, Output, Input } from '#angular/core';
#Component({
selector: 'app-discription-btn',
templateUrl: './discription-btn.component.html',
styleUrls: ['./discription-btn.component.css']
})
export class DiscriptionBtnComponent implements OnInit {
#Output() btnClick = new EventEmitter();
#Input() index!: number
constructor() { }
ngOnInit(): void { }
onClick() {
this.btnClick.emit();
}
}
Button Parent HTML and TS files:
<div class="card mb-4 h-100">
<img class="card-img-top-other" src= "{{ post.link }}" />
<div class="card-body">
<div class="small text-muted"> {{ post.created }} <app-discription-btn (btnClick) = "toggleDiscription()" [index] = index></app-discription-btn> </div>
<h2 class="card-title h4"> {{ post.title }} </h2>
<div *ngIf="showDiscription">
<p class="card-text"> {{ post.summary }} </p>
<a class="btn btn-primary" href="#!">Read More -></a>
</div>
</div>
</div>
import { Component, OnInit, Input } from '#angular/core';
import { Subscription } from 'rxjs';
import { BlogPost } from 'src/app/Post';
import { DiscriptionUiService } from 'src/app/services/discription-ui.service';
#Component({
selector: 'app-other-posts',
templateUrl: './other-posts.component.html',
styleUrls: ['./other-posts.component.css']
})
export class OtherPostsComponent implements OnInit {
#Input() post! : BlogPost
#Input() index! : number;
showDiscription : boolean = false;
subscription : Subscription;
constructor(private discritpionService: DiscriptionUiService) {
this.subscription = this.discritpionService.onToggle().subscribe((value) => (this.showDiscription = value));
}
ngOnInit(): void {
}
toggleDiscription(){
this.discritpionService.toggleDiscription();
}
}
Main HTML and TS files:
<div class="container">
<div class="row">
<div class="col-lg-8"><app-featured-post *ngFor="let post of posts; let i = index;" [post] = "post" [index] = "i"></app-featured-post></div>
<div class="col-lg-4"><app-side-widgets></app-side-widgets></div>
<app-other-posts *ngFor="let post of posts | myFilterPipe:filterargs; let i = index;" [post] = "post" [index] = "i" class="col-lg-4" style="padding-top: 10px;" ></app-other-posts>
<nav aria-label="Pagination">
<hr class="my-0" />
<ul class="pagination justify-content-center my-4">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Newer</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#!">1</a></li>
<li class="page-item"><a class="page-link" href="#!">Older</a></li>
</ul>
</nav>
</div>
</div>
import { Component, OnInit } from '#angular/core';
import { BlogPostService } from 'src/app/services/blog-post.service';
import { BlogPost } from '../../Post';
#Component({
selector: 'app-posts',
templateUrl: './posts.component.html',
styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {
filterargs = {title: 'The Beginning'}
posts: BlogPost[] = [];
constructor(private postService: BlogPostService ) { }
ngOnInit(): void {
this.postService.getPosts().subscribe((posts) => (this.posts = posts));
}
}
Any ideas would be a great help. Thank you ahead of time!
I am using js-year-calendar plugin to display all the months in a year at once. However, i can select just one day at a time and then store the date in the database. Please, is there a way to select multiple days e.g. 2020/08/04 - 2020-08-12 and then store this range in the database at once. Meanwhile, i have gone through the documentation but its was not clear to me. Please i need assistance to get a clear picture on how to go about this. Thanks
This is my view. I am sorry for the long code, i really assistance
HTML
<section id="filter" class="mb-3">
<div class="card">
<div class="col-sm-12">
<div class="card-header mt-3">
<div class="card-title-wrap bar-info">
<h4 class="card-title ml-4">{{'ALL_COMPANIES_HOLIDAY_CALENDER' | translate}}</h4>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="row">
<div class="col-md-6 col-lg-6">
<div class="row">
<div class="col-md-4 col-lg-4 col-12 mt-1 ml-4">
<div class="form-group row">
<div class="col-md-12 searchcat">
<select class="form-control " [(ngModel)]="holidays.company_id" id="company" name="company" (change)="getSelectedCompany(holidays.company_id)" required>
<option value="" disabled selected hidden>{{'SELECT_COMPANY' | translate}}</option>
<option *ngFor="let data of companyList; let i = index" [value]="data.id" >{{data.company_name}}</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5 ml-2">
<div class="col-md-12 col-lg-12">
<div id="calendar">
</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="clearfix"></div>
<ngx-datatable #table class='bootstrap' [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="'auto'" [limit]="50" [rows]='holidaysDataRows'>
<ngx-datatable-column name="{{'COMPANY_NAME' | translate}}" prop="company_name"></ngx-datatable-column>
<ngx-datatable-column name="{{'YEAR' | translate}}" prop="year"></ngx-datatable-column>
<ngx-datatable-column name="{{'HOLIDAY' | translate}}" prop="holidays_date">
</ngx-datatable-column>
<ngx-datatable-column name="{{'DESCRIPTION' | translate}}" prop="description" > </ngx-datatable-column>
<ngx-datatable-column name="{{'ACTIONS' | translate}}" prop="status">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row"
let-group="group" let-rowHeight="rowHeight">
<button (click)="editHoliday(editModal,row)" class="btn btn-raised mr-1 shadow-z-2 btn-info btn-sm ">{{'EDIT' | translate}}</button>
<button (click)="deleteModal(deleteholiday, row.holiday_id)" class="btn btn-raised mr-1 shadow-z-2 btn-danger btn-sm ">{{'DELETE' | translate}}</button>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
<div class="loader-div" *ngIf="showLoader">
<img src="assets/img/portrait/small/loader.gif" alt="spinner" class="loader">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
TS CODE
import { Component, OnInit, ViewChild } from '#angular/core';
import { SnotifyService } from 'ng-snotify';
import { Router, ActivatedRoute } from "#angular/router";
import { NgbModal, ModalDismissReasons, NgbActiveModal } from '#ng-bootstrap/ng-bootstrap';
import { HumanResourceService } from 'app/services/human-resource/human-resource.service';
import { TranslateService } from '#ngx-translate/core';
import { AuthenticationService } from 'app/services/authentication/authentication.service';
import { HumanResourceMasterService } from '../../../services/human-resource-master/human-resource-master.service';
import Calendar from 'js-year-calendar';
import * as moment from 'moment';
import { GlobalConstants } from 'app/shared/constants/global-constants';
#Component({
selector: 'app-all-company-holiday-calender',
templateUrl: './all-company-holiday-calender.component.html',
styleUrls: ['./all-company-holiday-calender.component.scss']
})
export class AllCompanyHolidayCalenderComponent implements OnInit {
#ViewChild('openModal') OpenModalotdeletepos;
companyList: any = [];
company_id: any = '';
datas: any;
dateFromModal : any;
closeResult: any;
currentHolidays: any = [];
holidaysDataRows: [];
HolidayDeleteData: any;
showLoader: boolean;
deleterowid: any;
holidaysData : any = [];
holidays: any = {
description: '',
date: '',
company_id:'',
hr_id: '',
hols_id: '',
}
selectedDate:any;
hrID: any;
eventDate: Date;
eventText: string;
myEvents: any[] = [];
constructor(private snotifyService: SnotifyService,private spinner:
FullLayoutComponent, private
route: ActivatedRoute, private modalService: NgbModal, private
loginService: LoginService,private hrMasterService:
HumanResourceMasterService, private hrService:
HumanResourceService, public authService: AuthenticationService,public
translate: TranslateService) {
ngOnInit() {
this.getDate();
}
getDate(){
var modalService = this.modalService;
var snotifyService = this.snotifyService;
var openModal = this.OpenModalotdeletepos;
var getDismiss = this.getDismissReason;
new Calendar('#calendar');
var holiday = this.holidays;
var translate = this.translate;
document.querySelector('#calendar').addEventListener('clickDay',
function(data) {
var hols = moment(data['date']).format(GlobalConstants.DATE_FORMAT);;
holiday.date = hols;
if(!holiday.company_id){
snotifyService.error(translate.instant('MESSAGE_PLEASE_SELECT_COMPANY'));
}
else{
modalService.open(openModal).result.then((result) => {
this.closeResult = GlobalConstants.CLOSE + `${result}`;
}, (reason) => {
this.closeResult = GlobalConstants.DISMISSED +
`${getDismiss(reason)}`;
});
}
})
}
getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return GlobalConstants.PRESS_ESC;
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return GlobalConstants.BACKDROP_CLICK;
} else {
return GlobalConstants.WITH + ` ${reason}`;
}
}
getHolidayData(){
this.showLoader = true;
this.hrMasterService.getHolidayData({}).subscribe(data => {
if(data.status_code = 200){
this.showLoader = false;
this.holidaysData = data.data;
this.holidaysDataRows = this.holidaysData;
}
else {
this.showLoader = false;
this.snotifyService.error(data.message);
}
})
}
saveHolidays(){
this.holidays.hr_id = this.hrID.id;
this.hrMasterService.createHolidays(this.holidays).subscribe(data =>{
if(data.status_code = 200){
this.snotifyService.success(this.translate.instant('MESSAGE_HOLIDAY_CREATED'));
this.modalService.dismissAll();
setTimeout(() => {
window.location.reload();
}, 1000);
} else {
this.snotifyService.error(data.message);
}
},error=>{
});
}
onChangeDate(holiday){
}
getSelectedCompany(company_id: any){
}
}
Replace new Calendar('#calendar') with new Calendar('#calendar',{enableRangeSelection: true});
then you can get it here:
document.querySelector('#calendar').addEventListener('selectRange', function(e) {
console.log("Select the range: " + e.startDate + " - " + e.endDate);
})
Year Calendar Documentaion
Here is a Stackblitz
Hi i'm trying to get the information of printers by the location. so if i have few printers at the same location ill see them both at the dropdown but i actually want to see only one location on the dropdown if they are the same location.
i know i can solve this in the database level and add relationships but maybe there is a way to do it without it ?
import {
Component,
OnInit
} from '#angular/core';
import {
HttpClient
} from '#angular/common/http';
import {
DomSanitizer
} from '#angular/platform-browser';
import {
Values
} from '../Models/Values';
#Component({
selector: 'app-value',
templateUrl: './value.component.html',
styleUrls: ['./value.component.css']
})
export class ValueComponent implements OnInit {
selectedPrinter: Values;
values: any;
constructor(private http: HttpClient, public sanitizer: DomSanitizer) {}
ngOnInit() {
this.getValues();
}
getValues() {
this.http.get('http://localhost:5000/api/values/').subscribe(response => {
this.values = response;
}, error => {
console.log(error);
})
}
}
<H2>Printer Manager</H2>
<div id="selectCompanyDiv">
<div class="col-12 col-md-3 col-xl-2 mt-5 bd-sidebar">
<label for="">Select Location</label>
<select class="form-control" [(ngModel)]="selectedPrinter">
<option *ngFor="let each of values " [ngValue]="each.location">{{each.location}} </option>
<!-- {{each.specificLocation}} -->
</select>
<!-- Search -->
<!-- <input id="test" *ngFor="let each of values " class="form-control" type="search" placeholder="Search" {{values.location}}>
<button ondblclick="Access()">click here
</button> -->
</div>
<br>
<br>
<div>
<div *ngFor="let value of values" id="mainDiv">
<div *ngIf="value.location===selectedPrinter">
<span>HostName: {{value.hostName}}</span>
<br>
<!-- <span>Location: {{value.location}}</span> -->
<span>Manufacturer: {{value.manufacturer}}</span>
<br>
<span>IP: {{value.ip}}</span>
<br>
<h2>{{value.location}}</h2>
<span>{{value.specificLocation}}</span>
<br>
<a target="_blank" [href]="sanitizer.bypassSecurityTrustResourceUrl('http://'+value.ip+'/general/status.html')">Full view</a>
<div>
<div *ngIf="value.model==='J480'" class="outerFrame">
<iframe [src]="sanitizer.bypassSecurityTrustResourceUrl('http://'+value.ip+'/general/status.html')" id="inneriframeBrotherj480" scrolling="no"></iframe>
</div>
<div *ngIf="value.model==='6530DW'" class="outerFrame">
<iframe [src]="sanitizer.bypassSecurityTrustResourceUrl('http://'+value.ip+'/general/status.html')" id="inneriframeBrother6530DW" scrolling="no"></iframe>
</div>
</div>
</div>
</div>
getValues() {
this.http.get('http://localhost:5000/api/values/').subscribe(response => {
this.values = [...new Set(response)];
}, error => {
console.log(error);
})
}
What i would do is the following:
In getValues():
getValues() {
this.http.get('http://localhost:5000/api/values/').subscribe(response => {
this.values = Array.from(new Set(response));
}, error => {
console.log(error);
})
}
Take a look at Array.from documentation and Array.from(set)
Good luck!
I have an Angular 6 Project with a Component which gets an tile Object passed by its parrent. For every tile passend I want to generate the same Chart with chart.js. I works fine for the first Chart but all the others don't get rendered. The console Error Code:
Failed to create chart: can't acquire context from the given item
My tile.component.html
<div *ngIf="tile.type === 'tileImg'">
<div class="card custom-card"
routerLinkActive="glowing">
<img class="card-img-top rounded" src="{{ tile.imgPath }}" alt="Tile image" />
<div class="card-body">
<p class=" card-text text-center">{{ tile.name }}</p>
</div>
</div>
</div>
<div *ngIf="tile.type === 'tileChart'">
<div class="card custom-card"
routerLinkActive="glowing">
<div>
<canvas id="canvas">{{ chart }}</canvas>
</div>
<div class="card-body">
<p class=" card-text text-center">{{ tile.name }}</p>
</div>
</div>
</div>
My tile.component.ts - Don't mind the comments, just for testing purposes
import { Component, OnInit, Input } from '#angular/core';
import { Chart } from 'chart.js';
import { Tile } from 'src/app/tile-container/tile/tile.model';
//import { TileChart } from 'src/app/tile-container/tile/tile-chart.model';
#Component({
selector: 'app-tile',
templateUrl: './tile.component.html',
styleUrls: ['./tile.component.css']
})
export class TileComponent implements OnInit {
#Input() tile: Tile;
//tileChart: TileChart;
chart = [];
constructor() { }
ngOnInit() {
//console.log(this.tile);
//console.log(this.tile.getType());
//console.log(this.tile.getChartType() + " " + this.tile.getChartData() + " " + this.tile.getType().localeCompare('tileChart'));
//console.log(this.tile.getType() == 'tileChart');
if (this.tile.getType() == 'tileChart') {
this.generateChart(this.tile.getChartType(), this.tile.getChartData());
}
}
generateChart(chartType: string, chartData: number[]) {
this.chart = new Chart('canvas', {
type: chartType,
data: {
datasets: [{
data: chartData,
backgroundColor: ['#F39E01', '#b8bbc1']
}],
labels: [
'Verbrauch diese Woche',
'Einsparung in kWh'
]
},
options: {
legend: {
display: false,
},
rotation: 1.1 * Math.PI,
circumference: 0.8 * Math.PI
}
});
}
}
And the parent tile-container.component.html - Not really necessary
<div class="container custom-container">
<div class="container-heading">
<h2>{{ tileContainer.name }}</h2>
</div>
<hr />
<div class="row">
<div class="col text-center"
*ngFor="let tile of tileContainer.tiles">
<app-tile
[tile]="tile">
</app-tile>
</div>
</div>
</div>
Screnshot from missing charts
EDIT
This is my edited typescript code. every tile has an id which I tried to use to have a unique id for every chart created.
ngOnInit() {
console.log(this.tile.id);
if (this.tile.getType() == 'tileChart') {
this.chartId = this.tile.id.toString();
this.ctx = document.getElementById(this.chartId);
console.log(this.ctx);
this.generateChart(this.tile.getChartType(), this.tile.getChartData());
}
}
This a the html where I used databinding.
<div>
<p>{{ chartId }}</p>
<canvas id="{{ chartId }}">{{ chart }}</canvas>
</div>
Picture of error codes
in the template (html), the id for the canvas has to be different for each chart
i am going to give you diferrents approaches the first one it is the most simple the anothers you need a litle more knowledge...i hope it's help
1.-
You can genera a single component just for render the chartjs graphic for example call it chart-dynamic with several inputs id for grabs the unique id you need for render several charts, and dataChart for all fully object to render , asuming that your tile. component looks like this
Important!! you dataChart must be thinking like a array of object and each object it is basicly a chart you will render into your template (follow the oficial documentacion of chartJs)
<div *ngIf="tile.type === 'tileImg'">
<div class="card custom-card"
routerLinkActive="glowing">
<img class="card-img-top rounded" src="{{ tile.imgPath }}" alt="Tile image" />
<div class="card-body">
<p class=" card-text text-center">{{ tile.name }}</p>
</div>
</div>
</div>
<div *ngIf="tile.type === 'tileChart'">
<div class="card custom-card"
routerLinkActive="glowing">
<!-- NEW CODE -->
<ng-container *ngIf="dataChart?.length > 0" >
<div *ngFor="let chart of dataChart; let i=index">
<app-chart-dynamic [id]="SomeUniqueID" [dataChart]="chart" [type]="chart.type"></app-chart-dynamic>
</div>
</ng-container>
<!-- Finish here -->
<div class="card-body">
<p class=" card-text text-center">{{ tile.name }}</p>
</div>
</div>
</div>
IN YOUR tile.component.ts Generate data method as array of objects, move generateChart function into the new component
import { Component, OnInit, Input } from '#angular/core';
import { Chart } from 'chart.js';
import { Tile } from 'src/app/tile-container/tile/tile.model';
//import { TileChart } from 'src/app/tile-container/tile/tile-chart.model';
#Component({
selector: 'app-tile',
templateUrl: './tile.component.html',
styleUrls: ['./tile.component.css']
})
export class TileComponent implements OnInit {
#Input() tile: Tile;
//tileChart: TileChart;
chart = [];
public dataChart: [];
constructor() { }
ngOnInit() {
//console.log(this.tile);
//console.log(this.tile.getType());
//console.log(this.tile.getChartType() + " " + this.tile.getChartData() + " " + this.tile.getType().localeCompare('tileChart'));
//console.log(this.tile.getType() == 'tileChart');
this.getCharts();
}
public getCharts() {
// call data from you service or data mock
this.dataChart = {....response};
}
}
now assuming you has created your new component should looks like this (you have already import charJs and another stuff)
import { Component, OnInit, Input, ViewChild, ElementRef, AfterViewInit } from '#angular/core';
import { Chart } from 'chart.js';
#Component({
selector: 'app-chart-dynamic',
templateUrl: './chart-dynamic.component.html',
styleUrls: ['./chart-dynamic.component.css']
})
export class ChartDynamic implements OnInit, AfterViewInit {
#Input() datasChart: any;
#Input() id: string;
#Input() type?: string;
public idChart: any;
#ViewChild('chart') chart: ElementRef;
public chartObject: any;
constructor() { }
ngOnInit() {
}
generateChart(id: string ,chartType?: string, chartData: any) {
this.idChart = this.id;
this.chart = new Chart(`${this.idChart}`, this.datasChart );
}
ngAfterViewInit() {
this.drawGraphics();
}
}
app-chart-dynamic html file
<div class="some-class-style" >
<canvas [id]="id" #chart> {{ chart }}</canvas>
</div>
it should work if you add into your modules and etc
the another approach is combine viewChild and viewChildren with factory resolver it is more complex but more power full you should check firts based on angular documentation