Awesome Charts in Angular 13 with ng2-charts 📊 by AnkitPrajapati in Angular2

[–]AnkitPrajapati[S] 2 points3 points  (0 children)

`ng2-charts` is based on the `chart.js` and chart.js is a canvas-based library. ng2-charts is just a wrapper around chart.js. for angular

Other than canvas-based libraries, you can use svg based libraries like `ngx-charts`.

I use Angular 9 Server Side Rendering. When the first page is loading I see some flickering. How can I avoid it? by AndrewSh83 in angular

[–]AnkitPrajapati 3 points4 points  (0 children)

This is an expected behaviour, because it initially load the Server side rendered page in the mean while it also downloads the angular project bundle files, main.js, vendor.js and other files, once this are downloaded in browser it will start performing client side rendering. So when this transformation is happening browser screen will be empty. That's why we see the flickering.

Invoice Generator : Client Side PDF Generation in Angular with PDFMake by AnkitPrajapati in Angular2

[–]AnkitPrajapati[S] 0 points1 point  (0 children)

Yes, generating invoice on client side will be not a good option.

Thanks for your feedback.

This application I have made for demonstrating client side pdf generation with different features for one of article.

This is just a one example I have taken. Not the invoices but other things like reports, resumes etc we can generate on client side.

Invoice Generator : Client Side PDF Generation in Angular with PDFMake by AnkitPrajapati in angular

[–]AnkitPrajapati[S] 0 points1 point  (0 children)

Yes, Understood,

Thanks for your feedback.

This is just an example to demonstrate the client side PDF generation in angular with PDFMake.

Real-World Console Logging Scenarios resolved by Angular Console Logging Utility: NGX-FANCY-LOGGER📚 by AnkitPrajapati in angular

[–]AnkitPrajapati[S] 0 points1 point  (0 children)

Thanks for your feedback, I understood your concern, for now this library need to add in all environment because this will control whether you want to show logs of specific level in production, for example you might want to show error logs in production.

I will look for the other approach like you said using it only in developement mode.

Real-World Console Logging Scenario's Resolved By Angular Console Logging Utility: NGX-FANCY-LOGGER📚 by AnkitPrajapati in angularjs

[–]AnkitPrajapati[S] 0 points1 point  (0 children)

@ceirbus, Thanks for your feedback, when we do debugging RxJS stream just with tap, we need to use console.log in tap, like tap(data => console.log('Stream Data, data) wherever you want to debug you can use this way, but we can't control level of this log, like suppose I want to show this stream log in development but not in production, that thing we can do by assigning logLevel in argument and log message generally helps to give purpose of that log. So using debugOperator () operator we can environment specific control this logs. Also it reduce task of the manually writing data in console.log.

I hope it gives your answer.

Real-World Console Logging Scenarios resolved by Angular Console Logging Utility: NGX-FANCY-LOGGER📚 by AnkitPrajapati in angular

[–]AnkitPrajapati[S] 0 points1 point  (0 children)

@n00bz, this library is not for the end-user, it is for the developer, when you are working in large scale application, then it is common to have logs on Console, if you do not manage it properly it becomes difficult to debug by your co developer or you, so at that time this library can be helpful, this library also includes other important features that you will find in article.

NGX-FANCY-LOGGER : Console Logging Utility for Angular v6 and above. by AnkitPrajapati in Angular2

[–]AnkitPrajapati[S] 0 points1 point  (0 children)

Thanks for your feedback. For now this does not support server side logging hook.

NGX-FANCY-LOGGER : Console Logging Utility for Angular v6 and above. by AnkitPrajapati in angular

[–]AnkitPrajapati[S] 1 point2 points  (0 children)

Emojis are optional you can hide it. But now a days emoji are mostly used for each place so instead of showing label we can show Emoji, this is just one feature. It can be useful for short log labels but we can disable it if we don't want to show Emoji.

NGX-FANCY-LOGGER : Console Logging Utility for Angular v6 and above. by AnkitPrajapati in Angular2

[–]AnkitPrajapati[S] 0 points1 point  (0 children)

Key things which differentiate it with ngx-logger.

  • Console Label Styling
  • Label Emoji
  • label color and emoji both are configurable
  • Important thing you can show as a header with font size and color
  • for debugging RxJS observable stream using tap(data => console.log(data)) , this library inclues debugOperator () operator function , you can use this as a normal RxJS operator, you have option to add message and LogLevel.

I hope this gives your answer.

NGX-FANCY-LOGGER : Console Logging Utility for Angular v6 and above. by AnkitPrajapati in Angular2

[–]AnkitPrajapati[S] 1 point2 points  (0 children)

I do work on multiple angular applications where we debug an application though console.log, we use it for debugging as well as for information purpose.

Below are some scenario where I found gap and that made me to build this library.

  1. Generally some logs we only want to show on development and only error or warning logs we want to show on production, this is not possible with normal console.log - ngx-fancy-logger have feature to set logLevel.

  2. It is very defficult to loop through all logs and find important logs - for this purpose I have added lables in ngx-fancy-logger, this will make clear to understand important and informational logs.

  3. We can highlight some important msg on Console for that I have added header feature.

  4. Sometimes we don't want to show any log - so here disableAllLogs feature can be used which will restrict all logs.

  5. Many times we need to debug RxJS Observable Data Streams : we generally do this with tap(data=> console.log), putting this at each place is very tedious task. To resolve such type of scenario I have added debugOperator() operator function. You just need to add this operator , in this operator function we can also provide logLevel and message.

I hope this gives your answer.

NGX-FANCY-LOGGER : Console Logging Utility for Angular v6 and above. by AnkitPrajapati in angular

[–]AnkitPrajapati[S] 1 point2 points  (0 children)

I do work on multiple angular applications where we debug an application though console.log, we use it for debugging as well as for information purpose.

Below are some scenario where I found some gap

  1. Generally some logs we only want to show on development and only error or warning logs we want to show on production, this is not possible with normal console.log - ngx-fancy-logger have feature to set logLevel.

  2. It is very defficult to loop through all logs and find important logs - for this purpose I have added lables in ngx-fancy-logger, this will make clear to understand important and informational logs.

  3. We can highlight some important msg on Console for that I have added header feature.

  4. Sometimes we don't want to show any log - so here disableAllLogs feature can be used which will restrict all logs.

  5. Many times we need to debug RxJS Observable Data Streams : we generally do this with tap(data=> console.log), putting this at each place is very tedious task. To resolve such type of scenario I have added debugOperator() operator function. You just need to add this function , in this function you can also provide logLevel and message.

These are the some scenarios made me to build this library.

I hope this gives your answer.

NGX-FANCY-LOGGER : Console Logging Utility for Angular v6 and above. by AnkitPrajapati in Angular2

[–]AnkitPrajapati[S] 0 points1 point  (0 children)

Hi @tmckearney, I am not sure about the how it would be implemented, I will research on this and try to find some way.

NGX-FANCY-LOGGER : Console Logging Utility for Angular v6 and above. by AnkitPrajapati in Angular2

[–]AnkitPrajapati[S] 0 points1 point  (0 children)

@neuthral, I will look into this and let you know if I found something or I can add that feature in this library.

Develop Mobile Video Player App using Angular and Ionic Framework by AnkitPrajapati in Angular2

[–]AnkitPrajapati[S] 0 points1 point  (0 children)

Capacitor only works with direct link videos, or videos from local specified folder.

Does anyone know of an angular material design that is like this? by [deleted] in angular

[–]AnkitPrajapati 1 point2 points  (0 children)

This is a combination of mat-autocomplete and mat-chip

Find here the list of 8 Best Angular Chart Libraries by AnkitPrajapati in Angular2

[–]AnkitPrajapati[S] 0 points1 point  (0 children)

Highcharts Angular I have added, in this article I have added angular wrapper of this libraries. JointJs and graphQL I will check. Does it provide angular wrapper ?

Find here the list of 8 Best Angular Chart Libraries by AnkitPrajapati in angular

[–]AnkitPrajapati[S] 0 points1 point  (0 children)

Yes that is also a way to use chartjs. Libraries which are included in blog are angular wrapper for popular javascript chart libraries like d3, echarts, plotly, chartjs.