tag:blogger.com,1999:blog-3945433340473224396.post603249177214232884..comments2024-02-12T22:38:32.637-08:00Comments on Make It Easy: Conditionally add class to an element on click - angularPrashobhhttp://www.blogger.com/profile/00289297725972004641noreply@blogger.comBlogger14125tag:blogger.com,1999:blog-3945433340473224396.post-91734907790197986562022-03-05T00:03:28.851-08:002022-03-05T00:03:28.851-08:00Pretty good post. I just stumbled upon your blog a...Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info. <a href="https://catcherrors.com/repos/facebook/react" rel="nofollow">https://catcherrors.com/repos/facebook/react</a><br />w khttps://www.blogger.com/profile/09521109921164598977noreply@blogger.comtag:blogger.com,1999:blog-3945433340473224396.post-3052678402908756422020-07-30T06:54:48.997-07:002020-07-30T06:54:48.997-07:00Thanks :)Thanks :)Anonymoushttps://www.blogger.com/profile/08470271754565985888noreply@blogger.comtag:blogger.com,1999:blog-3945433340473224396.post-25851864563725135672020-04-12T00:44:08.800-07:002020-04-12T00:44:08.800-07:00You can read the URl and update the logic https://...You can read the URl and update the logic https://www.angulartutorial.net/2020/03/how-to-get-parameter-on-angular-route.htmlPrashobhhttps://www.blogger.com/profile/00289297725972004641noreply@blogger.comtag:blogger.com,1999:blog-3945433340473224396.post-41911059662490393772020-03-04T22:50:30.886-08:002020-03-04T22:50:30.886-08:00i have done this and its working for me. But when ...i have done this and its working for me. But when i refresh page the css removed. Any way to persist or add class as per url in browser?Ashuhttps://www.blogger.com/profile/11553458859615654069noreply@blogger.comtag:blogger.com,1999:blog-3945433340473224396.post-3436552083969819862019-08-13T18:08:45.997-07:002019-08-13T18:08:45.997-07:00This is very useful code. I've applied this co...This is very useful code. I've applied this code to navbar where added active class if item is selected.<br /><br />But now I want if other item is clicked, previous active class will be removed and add to selected item only. Can you please help me to achieve this?<br /><br />onItemSelected(item) { this.selectedItem = item; }<br />isActive(item) {return this.selectedItem === item }<br /><br /><br />--li *ngFor="let item of items"<br />--a (click)="onItemSelected(item)" [ngClass]="{'active': isActive(item)}"Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-3945433340473224396.post-66384103948105430402018-08-17T15:56:56.021-07:002018-08-17T15:56:56.021-07:00ngOnInit() {
this.blogService.getPublished().s...ngOnInit() {<br /> this.blogService.getPublished().subscribe(blogs => (this.blogs = blogs));<br /> this.categoryService<br /> .getCategories()<br /> .subscribe(categories => ( this.categories = categories, this.select(this.categories[0])) );<br /> }<br />I'm try by this way, but nothing happens.Jouhttps://www.blogger.com/profile/03172322140786979552noreply@blogger.comtag:blogger.com,1999:blog-3945433340473224396.post-60549164014101006302018-05-28T01:43:16.933-07:002018-05-28T01:43:16.933-07:00man you are great,thanksman you are great,thanksREZOOhttps://www.blogger.com/profile/01617793855363252480noreply@blogger.comtag:blogger.com,1999:blog-3945433340473224396.post-71533066038383731382018-03-19T00:49:10.627-07:002018-03-19T00:49:10.627-07:00This is very good exampler but if 2 names are same...This is very good exampler but if 2 names are same both are clicked, if at arrays you have names, id and other things the best thing is selected to be like this.selected = item.id or something like this. But this code helped me so much.<br />Best Regards<br />You are very very good<br /> <br />Anonymoushttps://www.blogger.com/profile/15338833204040379790noreply@blogger.comtag:blogger.com,1999:blog-3945433340473224396.post-52037481184708155692018-02-08T23:01:20.365-08:002018-02-08T23:01:20.365-08:00One of the easiest way to do this is that, just in...One of the easiest way to do this is that, just invoke the method after getting the result. For example ,in my above example case..<br />Call this method after getting result<br />this.select(this.list[0]);<br /><br />In your case, might be something like this<br />this.setCurrencyActive(this.currencySelected); Prashobhhttps://www.blogger.com/profile/00289297725972004641noreply@blogger.comtag:blogger.com,1999:blog-3945433340473224396.post-5620425528597060082018-01-30T03:32:04.337-08:002018-01-30T03:32:04.337-08:00nice tutorial nice tutorial muahttps://www.blogger.com/profile/15458143343589153663noreply@blogger.comtag:blogger.com,1999:blog-3945433340473224396.post-30236162516779159962018-01-17T23:13:57.587-08:002018-01-17T23:13:57.587-08:00Try to add e.stopPropagation(); on Model popup but...Try to add e.stopPropagation(); on Model popup button click.Prashobhhttps://www.blogger.com/profile/00289297725972004641noreply@blogger.comtag:blogger.com,1999:blog-3945433340473224396.post-7759361270087274412018-01-17T22:43:43.306-08:002018-01-17T22:43:43.306-08:00Hi ABC.com
saw ur post and implemented ur code in...Hi ABC.com<br /><br />saw ur post and implemented ur code in my project:<br />Add class to an element on click, by only using html code on tr like somewhat like this<br />.<br />.<br />.<br />.<br />.<br />--tr-- *ngFor="let n of list" [class.active]="clicked === n" (click)="clicked = n"<br />--td--Some data....--/td--<br />--td--Some data....--/td--<br />--td--Modal popup button--/td--<br />--td--Some data....--/td--<br />--tr--<br /><br />Now when i click on modal popup active class added to the parent tr!<br />How to prevent this from happening ?<br />DdotRANOLIA92@GMAILdotCOMfiredshotshttps://www.blogger.com/profile/08502988273078027578noreply@blogger.comtag:blogger.com,1999:blog-3945433340473224396.post-40477851494874468022017-12-27T03:50:02.963-08:002017-12-27T03:50:02.963-08:00I am not sure what is happening in your case. Add ...I am not sure what is happening in your case. Add important to your css and try once. Difficult to judge with out seeing the code. Prashobhhttps://www.blogger.com/profile/00289297725972004641noreply@blogger.comtag:blogger.com,1999:blog-3945433340473224396.post-50287651447192990422017-12-27T02:26:05.519-08:002017-12-27T02:26:05.519-08:00Hi,
This is amazing. I applied this to my thumbnai...Hi,<br />This is amazing. I applied this to my thumbnails in Angular 2, so whenever clicked the background colour changes. <br />My problem is that the backgroud changes only while I am pressing on the mouse. As soon as I release the mouse, the thumbnail is not active anymore. So, do you have any suggestions for that?Anonymoushttps://www.blogger.com/profile/18325154298672222749noreply@blogger.com