Angular Material Icons List (Mat-Icon)įor the better UI with the best performance, the material icons are best because it gives the best User Experience with high performance. Here below you have 1000+ Material Icons using this you can add the icons on your Angular projects. You can use the Material Icons in different formats also for different types of projects and platforms. One of the growing icon collections is Material Design, this will help designers and developers with better User Interface(UI). You can use these icons for Desktop, Android, and iOS. All the icons created with the design guidelines of engaging, wonderfully crafted symbols for common actions and items. Or just feel free to go grab the source code on GitHub.Material Design providing 1000+ icons with simple, stylish and pleasant. Update the code you see here to suit your own business requirements. Now that you get the idea, it's over to you. Now go back to the table and click the edit icon (the pencil). You should go to a different route that shows read-only info about the contact. Go ahead and click the preview icon (the one on the left). But now it has clickable icons in the left-most column. You should see a table listing all your contacts. Select Contacts and View Contacts from the left-hand sidebar menu. Now visit and login with the usual credentials (darth/thedarkside). Make sure you also start the corresponding Spring Boot applications: the user service and the contact service. Save all your files and start your Angular CRM app. Now it's time to see if this thing really works. It follows the exact same logic as editContact() except it uses a different URL.Īnd bam. So all you really needed to do was implement viewContact(). Next, you need to implement those two methods referenced in the clickable icons: editContact(contact: Contact) ) Ĭome to think of it, you had already implemented editContact() in the guide on clickable rows.
So you certainly want that included.īut the table seems too cluttered with 'source' in there. Remember: 'action' is the column you just created. The update there is that the array removes 'source' and adds 'action.' Make a couple of changes, starting with this one: displayedColumns: string = In the meantime, that's all you need to do on the HTML side. You haven't yet implemented those methods. The second method follows the logic in editContact(). The first button follows the logic in the viewContact() method when clicked. They both use Angular Material icons so everything plays nicely with the underlying framework. Those are the two clickable icons, here coded as buttons. That's because you don't need to sort the Action column.Īnyhoo, the important stuff is inside the element. That's the column that will display your new clickable icons.įirst of all, note what's not in that code block: mat-sort-header. Eliminate one column and add a new column called "Action." That's where you'll put the icons. He walks out, muttering to himself about his boss's boss.Įven though your table is horizontally scrollable, it's going to get too "busy" if you just throw another column in there. "Can you put a couple of icons in each row of the contacts table? Make one icon for editing the contact and another for just viewing the contact." They don't want clickable rows in that table any more! They want clickable icons!" "It's about that CRM app you're working on. "Welp, management changed their minds again!" he says, throwing his hands up in the air. Your boss Smithers walks into your office, clearly frustrated. Note that the website displays the guides in reverse chronological order so if you want to start from the beginning, go to the last page. If you want to follow the whole series, just view the careydevelopmentcrm tag. The master branch holds the entire application up to the current date. The GitHub code for each guide belongs to a specific branch. Please note: this guide is a part of an ongoing series of tutorials on how to create a customer relationship management (CRM) application from scratch. Remember: if you're having problems running the Angular app locally, be sure to check the README. Of course, you can always go straight to the code on GitHub. Wanna give users their choice of what kinds of actions they take on a data table row? If so, then consider adding clickable icons to your Angular Material table.Īnd, happily enough, I'm here to show you how to make it happen.
0 kommentar(er)
