You can find all the code in the Github repo: github.com/Devstackr/kanban-angular-layout
@Devstackr
5 жыл бұрын
Sorry for the small font size in this video, the font size will be bigger in all future videos :)
@Devstackr
5 жыл бұрын
@@JohnSourvinos haha :) Yes, sorry, I recorded this video months ago, before you posted your comment :P
@br3ak_
2 жыл бұрын
Awesome stuff. I will extend the app a bit more with functionality for adding and removing tasks, plus change the design and this is going straight into my portfolio. I need to update my portfolio because I wanna job-hop and I still have my old portfolio that got me my first job. I hope for more content of the same concise high quality on this channel. Congrats.
@kj4derEchte
4 жыл бұрын
If you want to skip the css tutorial, the main part starts at 22:15
@AJSpeller
4 жыл бұрын
Yet another great tutorial. I plan on upgrading this project to able to add boards, columns and tasks on the fly.
@Devstackr
4 жыл бұрын
Sounds awesome AJ, great ideas to expand the app!
@milanlietava6913
Жыл бұрын
Amazing :) definitely one of the best tutorials I have ever seen. Thank you so much for the lesson.
@ali-celebi
4 жыл бұрын
That was really good to watch Andy! Thanks a lot!
@Devstackr
4 жыл бұрын
Hey Ali, nice to see you again! Really glad you liked the video and thank you so much for the continued support, I really appreciate it 😀 Andy
@melikekozan7711
4 жыл бұрын
Kardeş çok teşekkürler be. Çok anlamasam bile dediklerinden o kadar çok işime yaradı ki proje. Thank you soo much bro!
@Devstackr
4 жыл бұрын
Hey Melike! Really glad the project worked well for you, and thank you so much for the comment, I really appreciate it 😄
@abdullahh10
2 жыл бұрын
Absolutely amazing tutorial! Thanks a lot.
@MoeMonkey78
2 жыл бұрын
This was wonderful to follow along, thank you!
@TheUnknown1709
2 жыл бұрын
Great Video One helpful improvement, use a zoom factor when showing code in VSCode on KZitem in a Standard monitor the code was very small, I either used the git Repo or the Windows Magnifier to follow along. Thank you for the time and effort
@nikhilchavan1809
3 жыл бұрын
Awesome and very useful tutorial!!!!
@Devstackr
3 жыл бұрын
Thank you so much Nikhil, I am really happy you enjoyed the tutorial!! :D
@DecentralEyes
2 жыл бұрын
For consistency you could use more flex properties such as justify-content: space-evenly instead of margin settings!
@sauravchoudhary10
5 жыл бұрын
Awesome man !! This helps me a lot 🤘🏻☺️
@Devstackr
5 жыл бұрын
Hey Saurav :) Super glad you found my video helpful and thank you for the comment, appreciate it! Andy
@sadrarahmani6246
5 жыл бұрын
thank you dude, this helped me get started
@Devstackr
5 жыл бұрын
Hi Sadra, I am so glad my video was helpful! Thanks so much for the comment, I really appreciate it :) Andy
@Ben-pv9yh
3 жыл бұрын
Awesome. thanks. this helped me so much!
@anassdkh
4 жыл бұрын
thank you , i hope you add an input to it to add or modify tasks
@paulfernandez4797
4 жыл бұрын
Thank you man! It super clear and helps a ton!
@Devstackr
4 жыл бұрын
Hey Loic - thank you so much for the comment, I am super happy the video helped you! Thanks again for the comment Loic, it really means a lot to me 😃
@javiervillar4109
4 жыл бұрын
Amazing ! Very helpful !
@Devstackr
4 жыл бұрын
Thank you so much Javier - really appreciate your comment :D
@beggimiro
4 жыл бұрын
I created a kanban table with java script, it has iniciated, testing and done. I have another table called repairs that has the state of the repair: 1-iniciated 2-testing 3-done, how can i link those two? I want to connect the kanban with the state of the repair and whenever i drag 1 to 3 it would change into the right state on mysql.
@yosefhamdy9145
Жыл бұрын
Excellent tutorial ❤❤
@BiezdarJS
Жыл бұрын
Unfortunatelly your repo does not work (after running 'npm i'), I get 'Cannot find module 'node-sass' error
@DecentralEyes
2 жыл бұрын
This is really great! 👍
@kapilbillore452
2 жыл бұрын
Hi mate , have a query on CSS flexbox. Why did you make group columns inside of board wrapper when u could have made just group column and make board wrapper as flexbox?
@carlosaguilar-g6k
2 жыл бұрын
Thanks a lot! very usefull tutorial.
@nathanjbro
4 жыл бұрын
Hey man, great video and design! any plans to add the backend + an option for adding and deleting tasks? it would make a great tutorial
@Devstackr
4 жыл бұрын
Thanks Nathan, glad you enjoyed the video! I have been thinking of creating a series where I build a Kanban application, with an Angular frontend like this and a backend with all the CRUD operations implemented. It's nice to know you're interested in something like this, I'll definitely keep it in mind when deciding which series I want to make next! Thanks for the feedback and the suggestion, I really appreciate it ;) Andy
@andilegumada9833
4 жыл бұрын
Backend in Java
@ABsazerNer
4 жыл бұрын
@@Devstackr I'm really glad to hear that, thank you @Devstackr
@aussieraver7182
4 жыл бұрын
I need to create a form builder for work, but I'll need the list to be two dimensional (I.e have a button aside an input box) whilst the form work vertical too
@Devstackr
4 жыл бұрын
Hey again Aussie Raver! You could do this by using flexbox with pure CSS, or use features of a CSS framework - I personally use the Bulma CSS framework a lot, which has a feature called 'Form addons' which allows us to add buttons to form fields (such as input boxes). If you think this may help solve your problem, here is a link to the form addons section of the Bulma docs: bulma.io/documentation/form/general/#form-addons I hope this helps 😃 Best of luck with the work project, and thank you for watching my video and for the comment - I really appreciate it 😄
@rohanv2574
4 жыл бұрын
Amazing!!!! How can we add custom columns and add or delete colunm bro!? ✨
@davidsosa5940
2 жыл бұрын
I get this error Property 'tasks' does not exist on type 'Column' where should I expecified the tasks?
@sasidharans5087
3 ай бұрын
Thank you!
@proveit99
8 ай бұрын
And what happen if you stack too much Task into one column?
@niko-okin5532
6 ай бұрын
you could use overflow-y: scroll; in the style file similar to how the overflow-x was done to so you could view all the columns for task grouping. This would allow for an up and down scroll function along the y axis to view any overflow tasks if you fill the view
@go_lang_thang
Жыл бұрын
nice bro... I hope you doing well !!!
@gungordenizkaratas4974
3 жыл бұрын
Thanks a lot!
@HK-sw3vi
4 жыл бұрын
for some reason I'm unable to move it across the boards, however, I'm able to reorder the elements withing the same board.
@Bukratusi
2 жыл бұрын
how we can save the order even after closing the app and save the view and load on next visit as per the user.
@tanmaysarin8408
Жыл бұрын
I am facing an issue: Once I move all the tasks from one column to another, I can't seem to drag them back to the first column. is anyone else facing the same issue? Any ideas on which needs to be changed? Thanks!
@gabrielq7
Жыл бұрын
Great content, thanks
@FahadShah822
5 жыл бұрын
Your keyboard sounds very satisfying. What keyboard is it?
@Devstackr
5 жыл бұрын
haha :) Its a CM Storm mechanical keyboard with brown switches
@rafaelcampos2222
2 жыл бұрын
hey man, thanks for the video. I try to run the project with the arquives of githb and I came across the error: "Could not find the '@angular-devkit/build-angular:dev-server' builder's node package" Can you help me?
@hlawulekamaswanganyi6438
5 жыл бұрын
What happens if the objects are not the same, i.e The Todo objects have properties different to the ones in Done?
@Devstackr
5 жыл бұрын
Hi Hlawuleka! I think it would still work since Javascript is very flexible - although Typescript may throw some warnings and/or errors. If it does, then you can most likely achieve what you want using Typescript classes - you can use inheritance, for instance. Or you could probably do it just using optional properties. Sorry I couldn't give a better answer, I hope this helped anyways :) Thank you so much for watching my video! Andy
@hlawulekamaswanganyi6438
5 жыл бұрын
You are right, my data and the logic that governs it are just slightly complex I figured what I may need to do
@TheoParis
4 жыл бұрын
Nice video!! Had to subscribe :)
@Devstackr
4 жыл бұрын
Awesome! Really glad you liked the video, thanks for the comment :D
@Myles_Parker
5 жыл бұрын
You said flex basis = 0 will set them all to be the same size but researching online, you need to set it to auto for that to happen :( Nice video btw
@Devstackr
5 жыл бұрын
Hi mbuff, thanks so much for watching the video! Flexbox can be a bit weird and I didn't explain in enough detail why I used flex-basis - sorry about that! You are correct in saying that flex-basis 0 won't make them all the same size, but when you use flex-basis: 0 in conjunction with flex-grow: 1, it does. The reason I had to use flex basis was because I found that setting flex-grow: 1 doesn't guarantee that the columns are the same size - thats not actually what it does, it just controls how the free space is distributed (and not how wide the elements are, this is an important distinction). Without flex-basis: 0, the columns can have different widths due to the differences in the width of their content, and I wanted all columns to have the same width. By using flex-basis 0, we are setting the initial width to 0, which doesn't make much sense by itself because otherwise we wouldn't see anything :) but because of the flex-grow, the width takes up the remaining available space - in other words if all columns have flex basis 0 then the entire initial width is 0, meaning all thats left is free space (which is what flex grow controls) and allows flex-grow to work how I conceptually thought it did (before I learned about all this flex-basis stuff). I hope that makes sense, please let me know if I can explain it in more detail :) Also, this link may be useful: css-tricks.com/flex-grow-is-weird/ Thanks again for watching, and thanks for this comment - its actually really nice answering these questions because it allows me to articulate things I wouldn't have needed to otherwise :) Andy
@Myles_Parker
5 жыл бұрын
@@Devstackr Hey Andy, Damn, i didnt expect that reply but it is way more informative than what i read online. I also read that "flex grow is wierd" article (made me laugh) When you use background-color(red, 0.5), i believe that only works if you have the colours preset but not if you dont as you will receive a syntax error if you write "background-color: rgba(red, 0.5);" It does not like that as it is expecting multiple RGBA numbers. Please feel free to make more videos as you have a very good way of explaining it in simpler terms Keep up the good work
@Devstackr
5 жыл бұрын
@@Myles_Parker Super glad my reply was informative :) Thank you so much for your kind comment, I'll continue to create as many videos/series as possible! About the rgba thing - I'm not sure if this is only a Sass/SCSS thing, but you should be able to use rgba() with hex values, rgb values, presets (like red, green, teal, lightblue etc) as well as variables ($primary, $brand-color ... etc - as long as these resolve to an appropriate color value). You may be having issues if you are using pure CSS, which I haven't used for a long time now ;-). If you are having a problem with rgba() in sass/scss let me know, I would be interested to look more into it. Again, thank you for your comment, I really appreciate you spending the time to watch my video and then also post thoughtful comments. Much appreciated :) Andy
@tanioshankach9175
2 жыл бұрын
when a column is empty ,i cannot move the card into it do you have any solution?
@br3ak_
2 жыл бұрын
You need to give a min-height to the container of the tasks, otherwise it loses all its height once there are no more tasks in the container and you can't move back anything there. .tasks-container { min-height: 60px; }
@rajanchavda1417
4 жыл бұрын
Helpful 🙏🏻
@Devstackr
4 жыл бұрын
Glad you found it helpful Rajan - thank you so much for the comment, I really appreciate it 😃
@darshanprakash
4 жыл бұрын
what do I do if I want to add columns on the go?
@Devstackr
4 жыл бұрын
Hey Darshan! The columns are "generated" by the ngFor in main-view.component.html, like this: *ngFor="let column of board.columns" So to add a column on the go, a new column object needs to be pushed onto the board.columns array I hope this helps - thank you so much for watching the video and for the comment, I really appreciate it :D
@aussieraver7182
4 жыл бұрын
21:35 How did you indent automatically like that?
@Devstackr
4 жыл бұрын
Hey Aussie Raver! I used the 'Format Document' feature in VS Code, you can see it in the context menu that appears if you right click in the editor, or use the keyboard shortcut (like I did in this video) which, on my computer, is Shift + Alt + F. Its a really nice feature that I use all the time 😄
@jaymeeshdonga1423
4 жыл бұрын
which angular you have used like angularjs,angular 7 ?
@Devstackr
3 жыл бұрын
Hey Jaymeesh! I think I used Angular 7 in this tutorial :)
@denizyldz1860
2 жыл бұрын
the keyboard sound is so loud.. but thank you so much
@Coimbrox
3 жыл бұрын
how i put a search filter on this kanban?
@EduAnmoldeep
4 жыл бұрын
Dude, that backgroud image site is paid, any walkaround to get it without the payment path?
@EduAnmoldeep
2 жыл бұрын
Makes sense, thanks!
@gourigouri6948
2 жыл бұрын
Used angular 8???
@Rm_rm_bjp
3 жыл бұрын
hai bro plz provied multiful anguar project classes
@eeveeaitch4735
Жыл бұрын
how can i add an web api to this?:)
@sas10x39
3 жыл бұрын
what happens if you eliminate bulma?
@br3ak_
2 жыл бұрын
not much, he didn't use bulma much if at all in the project, only for some variable names. You can easily achieve the same thing with plain css.
@azharuddinkhan2317
4 жыл бұрын
how I can make this kanban board editable and save the my data ? Please guide
@azharuddinkhan2317
4 жыл бұрын
@Devstackr
@br3ak_
2 жыл бұрын
To save the data the easiest way is to save the arrays in browser's local storage. To make it editable you can use two way binding on the tasks and add a click event on them which can trigger an input somewhere on the page, in which whatever you enter will edit the task you clicked after pressing a submit button.
@weicao4101
5 жыл бұрын
what does !important in scss
@Devstackr
5 жыл бұрын
In CSS (and SCSS) important simply means that the style should override all others (even if they are defined afterwards. In CSS, styles are resolved from top to bottom so if you have a style that conflicts with another style, the style that was defined *after* (lower down in the file) is applied instead of the one thats before. !important overrides this rule. So in this example, if the style that was defined first had the !important flag, then that style would be applied instead of the second one. If they both had !important flags, then the last one would be applied (so it acts the same as if neither style had the flag). Hope that makes sense :) Andy
@arpadbalazs7403
3 жыл бұрын
Hi, You make great videos, but you must have a huge monitor, because I can't really see your code even on full screen. Could you zoom in, or change the font size? I think your videos would be more popular.
@DodosGround
3 жыл бұрын
i think im in love with you
@alexandersoltesz8103
4 жыл бұрын
Awesome content, thank you!! :)
@Devstackr
4 жыл бұрын
Thanks Alexander!! Really glad you enjoyed the video 😄
Пікірлер: 93