Sprint five lasted from April 8th to April 22nd. This sprint, we were focused on completing any big steps left that the project required in preparation for the upcoming sprint, where we will focus on our presentation. For the next sprint, we also have allocated enough time to polish minor details if necessary or finish any uncompleted project features.
My role this sprint was to implement a button that offered more buttons when pressed. This is useful in cases where we have multiple links or related content that can be categorized under a common theme.
To start, I created a new routing module and component for the new button. Yesenia helped me a lot with this task, since she set up the components for the existing buttons. She provided me with the correct commands, ng generate module file-name –routing and ng generate component file-name/sub-file-name. We worked together by bouncing ideas off as we pieced together the HTML and related programming for the new button. By the end of class, we successfully created a new button named dropdown that would rout to a new page, indicating the linked connection was successful.
This was not the full intention however, instead of bringing the user to a new page, the button should display three more options, each of which could have the capabilities to send the user to a new page. I created the three links, but I couldn’t figure out how to hide/show them upon triggering the dropdown button. I deduced that I would mostly have to play with the component.html file, I used the following link as a model of what I wanted to do.
In that link, scrolling down to the section titled “Drawer with explicit backdrop setting” I was able to look at the existing HTML and trim it down to fit the needs of the project. Mat-form-field and mat-option was specifically what I needed and what I used. With few modifications, and again some bouncing ideas from yesenia, I currently have the feature up and running. Some small things that I would like to get done if possible would be changing the color of the dropdown text to match the other buttons, as right now it is very distinguished looking. Also the manner in which the new options appear is not what I originally thought of, instead of creating a pop out list, I was thinking the buttons would appear on the sidebar beneath the dropdown button and would shift all other buttons below it down. The link below shows what I was originally thinking, but I couldn’t make that work as easily.
The focus for our next sprint will be coming up with our presentation and trying to merge our project with some of the other groups projects. We want to be able to combine our side bar with the team working on the search bar without stepping on toes. Tim is currently working on that, I may need to copy and paste some of my work in order to make sure its implemented in the current master branch.