Angular JS cascade notifications

Question

I need your advice to help me.

I'm making an Angular JS app and I need some notifications like angular-toastr or angular-ui-notification but showing not like a list but cascade. Like in picture bellow.

Can anybody help with advice or realization such kind of notifications?

Answer 1

So I think what you want to do is divide and conquer this problem: Think about the UI as a set of components. For the picture above, you might have the following.

// Notification Cascacder applies DOM transformations to a list of 
<notification-cascader>
      // Iterates over a list of notifications
      <notification-list>
             // Contains primary DOM for a notification
             // accepts a variety of arguments for opacity, notification-message, etc. 
            <notification-card> </notification-card>
      </notification-list>
</notification-cascader>

Now that you've broken it up you can determine what the API for each component may be, write the tests and then code the component. Writing it in this way will increase the reusability of each of the angular components. You could use a single notification-card without its parent in parts of the application. Although it isn't angularjs related you can read this and apply the concepts https://reactjs.org/docs/thinking-in-react.html