Тёмный
No video :(

Angular Directives - Build a Hold-to-Delete Button 

Fireship
Подписаться 3,3 млн
Просмотров 34 тыс.
50% 1

Learn how to use Angular Directives to build a hold-to-delete style button that removes a document from Firestore after holding down for 1 second. angularfirebas...
- Angular Directives angular.io/gui...

Опубликовано:

 

26 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 57   
@Fireship
@Fireship 6 лет назад
Going back to Angular + RxJS fundamentals to build a nice UI element for deleting important records. Let me know what you think in the comments :)
@chrischappell7643
@chrischappell7643 6 лет назад
you're handsome ,guy :D
@junaid.hassan
@junaid.hassan 6 лет назад
@juliohintze595
@juliohintze595 5 лет назад
Hey, I know this video is 9 months old, but I would like to know... what approach would you take to make a hold-to-delete button for mobile users?
@narcodico
@narcodico 6 лет назад
Way more elegant than the rough modal approach.
@bensonmwaura9494
@bensonmwaura9494 6 лет назад
Very intuitive. I can already see some potential with this for improving the user experience. Nicely done!
@Fireship
@Fireship 6 лет назад
Thank you Benson :)
@gunitakon
@gunitakon 6 лет назад
Yesss, getting more Angular content. Thanks.
@chandikalakshan468
@chandikalakshan468 2 года назад
Very useful and interesting video for me.
@jakobfrei1121
@jakobfrei1121 5 лет назад
Great video! The only nitpick I have is that your naming of things does not always fit at least my personal intuition. Example: (holdTime)="deleteCustomer()". This is not the most obvious way to convey what is really happening and may give people who are new to a codebase a hard time figuring out how stuff works. Longer names may look verbose at first, but they help newcomers and once you are accommodated to them their length does not bother you any more, at least in my experience. ;) Never the less, I learned a great deal from this tutorial!
@carrillocarlosce
@carrillocarlosce 6 лет назад
Awesome, I've moved to another country, so I have been a little off, but I'm ready to keep going, greetings.
@Fireship
@Fireship 6 лет назад
Good to hear from you, where did you move?
@carrillocarlosce
@carrillocarlosce 6 лет назад
From Venezuela to Perú, and I start to work in a company of software, design and web development, right now I'm in angular but I keep learning and making stuff on my free time =D
@hitesh-patil
@hitesh-patil Год назад
Nicely done
@abhijeetdey
@abhijeetdey 2 года назад
Brilliant!! I will try to remake this! Thanks 👍🏽
@rafaelurrea2385
@rafaelurrea2385 6 лет назад
Awesome use case to show the potential of rx/js
@Poseiden777
@Poseiden777 Год назад
if i had an array of objects and are displaying them on screen in containers, could we bind this hold to delete function to those containers and possibly the color loader to affect the container itself until it is deleted?
@MarkusHeinisch
@MarkusHeinisch 6 лет назад
Great idea and fantastic video. Thank you. I think, the user needs a visual feedback so that he has to push the button until the action is triggered. Any suggestions?
@SlavchoDimitrievski
@SlavchoDimitrievski 4 года назад
Great short video!
@hartnil93
@hartnil93 6 лет назад
Great idea, love it
@blessingschishimbakalambai8574
its always a delight to watch you program, cause your tips are very helpful. if only i could afford your pro subscription.
@kriashu
@kriashu 4 года назад
You just made Asp.net looks easy.. I wish angular have those nice inbuilt events..
@alextreme98
@alextreme98 4 года назад
thanks, a lot of new things i learned from this tutorial :D
@will_abule
@will_abule 6 лет назад
Great I've never thought of long pressing for delete I always use a confirmation dialog but no longer thanks Jeff. Please I need help with firestore cloud function I want to automatically update a field in a document base on a date field in that same doc or in extension a different doc in a same collection and even more a doc in a different collection. Please I need it 🙏
@Fireship
@Fireship 6 лет назад
I agree, popup dialogs are annoying. Can you send me more details on Slack?
@BobMossanen
@BobMossanen 3 года назад
I like your courses, I am looking to get support for hosting angular app on google cloud and also google photos rendering in angular 11 app
@intergral81
@intergral81 3 года назад
Awesome, thank you
@HenrryPires
@HenrryPires 5 лет назад
Great video. Thanks
@alamgirqazi1027
@alamgirqazi1027 5 лет назад
This is beautiful!
@boomshakalaka1858
@boomshakalaka1858 3 года назад
Could you do a react version of this? Or is there a exciting resource that could help me with this?
@mrhonrer
@mrhonrer 4 года назад
Is there a way to make that progress bar inside the button?
@tonysmarks3578
@tonysmarks3578 4 года назад
How to use directive to change table colums width ??
@sourishdutta9600
@sourishdutta9600 5 лет назад
Can you please make a video on how angular change detection works and NgZone things a little bit. And ofcourse ngrx and one more thing a little bit concept about real time data communication
@Manish-fm5iv
@Manish-fm5iv 6 лет назад
Thumbs up to the custom css console logs. TIL!
@khumozin
@khumozin 6 лет назад
Hey. Which CSS framework are you using?
@theairos13
@theairos13 5 лет назад
Man love your videos! But hey, where do you get the music for them?
@Skia_
@Skia_ 6 лет назад
Bro, are you planing on releasing some sort of an advanced paid course for an Angular web application in the near future?
@Fireship
@Fireship 6 лет назад
Yes, I'm working on a project called Fireship.io that will include a good deal of advanced angular content.
@devdharma3050
@devdharma3050 5 лет назад
Simple Superb :) Thank You
@dyn-01-h5n
@dyn-01-h5n 4 года назад
But if i build to mobile with cordova, its not working. Do you have any idea ?
@chadwickblackford5471
@chadwickblackford5471 6 лет назад
Amazing!!!!!!
@arpanbanerjee8584
@arpanbanerjee8584 4 года назад
Can you pls share a link to the source code of this video...that would be really helpful
@narutokunn
@narutokunn 4 года назад
What is the font you are using?
@Trubit
@Trubit 5 лет назад
I did not test it, but shouldn't you subscribe to cancel observable? Else tap operator won't work no? Or am I missing something?
@tomasporemba5748
@tomasporemba5748 5 лет назад
No, the takeUntil operator monitors the cancel observable.
@arpanbanerjee8584
@arpanbanerjee8584 4 года назад
I could not understand why did u filter this.cancel=this.state.pipe(filter(v=>v==='cancel)), when we already emit an event on mouseleave--> this.state.next("cancel"). Can someone explain this to me please? 🙏🥺
@sukhsingh7057
@sukhsingh7057 4 года назад
if you create another next method and don't filter it. It will end up going inside of that this.cancel and emit that value. So filter just stops this from happening.
@writangshumukherjee6474
@writangshumukherjee6474 6 лет назад
Hey! do you use one dark theme for vs code?
@viewfavorites
@viewfavorites 6 лет назад
Hey can you make a video about angular elements example anguler elements then ng build then use it to any angular-cli projects. Let say you put the angular-element in github and use it in angular-cli project. Hope does makes sense :-)
@Fireship
@Fireship 6 лет назад
Yes, I want to do more elements stuff, but will see more of that next year when Ivy is ready to reduce bundle sizes
@viewfavorites
@viewfavorites 6 лет назад
Sounds good!!!
@edgarsantos7782
@edgarsantos7782 5 лет назад
I don't like non component directives, like attributes in this example and the reason is simple. If you are using them inside a component tag and it has outputs/inputs you have trouble understand which belongs to what, can get messy. I understand the need for directives, but would just wish there was a less confusing implementation.
@arcticspacefox864
@arcticspacefox864 6 лет назад
What theme are you using in vscode?
@ChrisRuby
@ChrisRuby 5 лет назад
I think he's using Atom One Dark, it's the closest one I've been able to find.
@lAmKiIIer
@lAmKiIIer 6 лет назад
Nice
Далее
How To Make Angular Code More Reusable
19:14
Просмотров 28 тыс.
Angular CLI - The Basics
10:50
Просмотров 63 тыс.
10 Design Patterns Explained in 10 Minutes
11:04
Просмотров 2,2 млн
Advanced Angular Elements
11:46
Просмотров 64 тыс.
Microsoft FINALLY killed it
6:45
Просмотров 633 тыс.
microsoft doubles down on recording your screen
10:00
The Story of Next.js
12:13
Просмотров 567 тыс.
Angular is back with a vengeance
3:48
Просмотров 502 тыс.