UML Class Diagram for Angular 2 in Typescript and LifeCycle Hooks

4
votes

I am looking for some examples on UML Class Diagrams for Angular 2 in Typescript.

I am not sure how to define the LifeCycle Hooks within diagram, since on usually uses

export class BlahComponent implements OnInit {
}

and not the word inherits hence there is no inheritance at least between LifeCycle Hooks and the Class itself.

This also brings up the question if there should be any connection (relation) between Parent-Child Component Classes in UML Diagrams. This comes in lieu, as a Child Component does not inherit the Parent Component but only expects changes to shared variables between them.

In my opinion, UML Class Diagrams for Angular are usually just classes without any explicit connection to any of the other class components. I would love to have some clarity and examples on this topic.

Implementation

According to the Angular Documentation for onChanges it is an Interface I created an example Diagram as follows

enter image description here

it think from UML 1.4.2[source] onwards Object diagrams are obsolete so as of time being I created <<use>> tag for showing an instance of class within the class. It is wrong but just as an example here since EventEmitter according to the Documentation is a class and one tends to use event = new EventEmitter() in code.

Note

Above figure created using PlantUML which provides methods to change the diagrams accordingly.

1
angularumlclass-diagram
I don't know Angular, but implements is likely a Realize relation (dotted line with open triangle at the end).. – qwerty_so
Though your original question asked about OnInit the diagram shows OnChanges. But I'd assume the first is an interface too. So the Realize as in the diagram would apply as I assumed. – qwerty_so
yes OnInit and OnChanges fall in the same category under Angular hence just an example – Shan-Desai

1 Answers

4
votes

Your diagram is almost correct, but the ≪use≫-arrow points in the wrong direction. Class ExplorativeSearchFilterComponent refers to EventEmitter, not the other way around. In most cases, the ≪use≫-arrow points from caller to callee, but in this case, EventEmitter does not know who it is calling, while ExplorativeSearchFilterComponent actively uses EventEmitter to make sure it is called.

For more information about using UML for Angular applications, please refer to my white paper: Technical design in UML for Angular applications.