Toast Notification in Angular 13 | ng-angular-popup | Agular NPM Library | Angular Toast Tutorial |
Вставка
- Опубліковано 7 вер 2024
- Hi, in this Video I’m going showcase my own created NPM library which is ng-angular-popup. This library will help you to create a toast notification in your Angular 13 Projects.
You can use a toast notification in angular by following all the steps shown in the video. Toaster notification provide us the feasibility to display message required as per some desired logic in our angular app.
This a early build created by me, in upcoming months will be pushing more changes and customization. Stay Tuned!!
Npm Link : www.npmjs.com/...
Font-Awesome 4.7.0: www.w3schools....
Angular CRUD using Bootstrap : • Angular 11 CRUD with j...
Angular QUIZ App : • Angular 12 Quiz Applic...
Angular Add to cart : • Add to Cart in Angular...
Angular CRUD using .Net Core : • Angular 12 CRUD using ...
Telegram Link: LET'S PROGRAM
t.me/letsprogr...
The package has been update with new features and updated the selector, follow the below link for the new changes
letsprogram.in/blog/647990c15960050b58aca375
Thanks for video, in this moment i have an issue. The duration doesn´t work, the alert is visible always
how to customize the color of notification bar and the size .etc?
Thank you for all your hard work on these great tutorials!
I've been using your toast messages for a project, but have noticed that one the success messages doesn't completely dissapear. There is a little green bar noticable on right side of the screen. Anything you have experienced?
Best regards
Keld
Connect with me on telegram will check together 🙂
Awesome bro simple and easy to use. 🤘
I had this problem trying to use your lib:
Namespace '"/path/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
11 static ɵfac: i0.ɵɵFactoryDeclaration;
any idea how to fix it?
thank you for the series angular, that so helpful.
You're welcome 🙂
hi i want your angular document ,there is no links available to download in your decription
Thanks a lot for this code.
Working superb
You're welcome 🙂
Bro, how to prevent background actions in case of toast alert displaying.
Am getting an error in the 4th step. Its saying that lib-ng-toast is not a known element. Can you please help me with this. I have done the previous three steps correctly, but still getting an error.
The library is changed now. Take a look at this blog : letsprogram.in/blog/how-to-use-toast-messages-in-angular-project
Amazing library, I'm using this for a crud app, thanks you for a excelent job!
I want modify the "height" of the pop-up to show large message, is posible? I seen the class is .toast-right-top but I can't modify the height :(
Hi. I follow all your videos. I have a doubt. In my app, I created a full screen button where only a particular component appears in full screen, by using getdocumentsbyId. But the toaster messages are not appearing in the full screen mode. Y is it so. How to resolve it..
Please do reply...
Can you help me, how to implement read more or read less in list through pipes with the help of code
Thanks you, it is really useful.
You're welcome 🙂
wow thankyou tutorial sir
it's very useful
thank u pro
Your welcome
Explanation to good
Thank you
Awesome tutorial 👏
Glad you liked it 🙂
How to change style of popup? size, bg color?
My toastr notifies correct the message for 5s but it doesnt show in the green box, anyones know why ?
thanks a lot its very helpful
Welcome 🙂
Bro please make a video on login page ...I have project submission on login web page using angular13 material
hi dear,
Thanks for your job !!!
I have question:
Are you planning to do custom style?
And I have little trouble:
Why don't I have a close button?
It has a close button
@@letsprogram30 I do not have it displayed, so I asked you :).
At the same time if you look at dev tools in browser there is such a block, commented.
Can you tell me why it's like this?
Good job bro!
Thanks
I got error on size wouldn't increase
in my case ..... is giving error.....
please help me....
Please import the ngToastModule in the app module
Thank you, do you have a version for Angular 12?
You can use it just use -force while installing
bro how to change toast position like bottom right instead of top ?
position: 'br'
Use this position in the object where we are adding details, summary and duration
My laptop not working npm i ng-angular-popup
Use npm i ng-angular-popup -force
in my case error msg is working after loggin inbut success is not working. Why so??
Connect with me on telegram will help you there 🙂
@@letsprogram30 sure. Thanks for help
Super bro
Added new features of position and sticky also in new update
@@letsprogram30 bro please update about this features in npm website also
@@letsprogram30 what are the names of position ?.!.?
@@KVRao-rr2lk position : 'tr'
Position: 'tl'
Position: 'bl'
Postion: 'br'
Nice Library....how do I position where I want or resize the fonts?
This will be part of v0.0.8 will release by end of this month
I have updated the library, you can check the medium post
Does it work for angular 17?
It should! if you face any issue contact me via instagram
Is it possible to toast message position in center
Coming in the new version release
not work with the last version angular 14 .
Update is on the way
I have checked in my angular 14 app and it works like a charm
what about your github link
Hi
in above NPM Like getting 404 not found
Try npm install ng-angular-popup --force
Is this your npm package?
Yes, but yesterday I pushed a big change to it. This does work as shown in the video.
Follow the blog to make it work: letsprogram.in/blog/angular-application-with-dynamic-toast-notifications-using-ng-angular-popup
if u are gettting this error:
build errors static ɵcmp: i0.ɵɵComponentDeclaration;
try to change your version of library
i'm using angular 13.2
and i set it to:
"ng-angular-popup": "0.1.0"
New update is coming soon
NG8001: 'lib-ng-toast' is not a known element:
The package has been updated
letsprogram.in/blog/647990c15960050b58aca375
@Let's Program
i have this probleme :Error: node_modules/ng-angular-popup/lib/ng-toast.component.d.ts:14:18 - error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).
14 static ɵcmp: i0.ɵɵComponentDeclaration;
any help
Will be fixed in today’s update
@@letsprogram30 is it fixed ?
up
Is detail property optional or mandatory??
I kept it optional
@@letsprogram30 How do I use as a service.
@@VIjayKumartheh2o didn't get your question
getting the below error while installing. can u please help ?
code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @angular/common@15.2.9
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"^15.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^16.0.0" from ng-angular-popup@0.3.1
npm ERR! node_modules/ng-angular-popup
npm ERR! ng-angular-popup@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Just try with npm install -f
I will be pushing an upgrade to fix this issue soon.
Also you can read my blog about the same: letsprogram.in/blog/647990c15960050b58aca375
@@letsprogram30 With the new command it's getting installed but while running the application, this error is coming-
Error: Module not found: Error: Package path ./public-api is not exported from package D:\Angular
ode_modules
g-angular-popup (see exports field in D:\Angular
ode_modules
g-angular-popup\package.json)
@@arnabbasu4514 what is the version installed on package.json?
@@letsprogram30 "ng-angular-popup": "^0.3.1"
Auto closed not working how I fixed
DM me on insta let's fix it together
I am getting build errors static ɵcmp: i0.ɵɵComponentDeclaration;
Try npm i ng-angular-popup -force
@@letsprogram30 Hi thanks for the response, same error :(
this.toast.error({
detail: 'Success',
summary: 'Link copied to your clipboard',
duration: 4000, position: 'tr', sticky: true
});
This is how i implement it
@@letsprogram30 Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).ts(2314)
does it work for angular 12?
Yes