title: UML Class Diagram for Angular 2 in Typescript and LifeCycle Hooks
body: <p>I am looking for some examples on UML Class Diagrams for Angular 2 in Typescript.</p>
  
  <p>I am not sure how to define the <strong>LifeCycle Hooks</strong> within diagram, since on usually uses</p>
  
  <pre><code>export class BlahComponent implements OnInit {
  }
  </code></pre>
  
  <p>and not the word <code>inherits</code> hence there is no inheritance at least between LifeCycle Hooks and the Class itself.</p>
  
  <p>This also brings up the question if there should be any connection (relation) between <strong>Parent-Child Component Classes</strong> in UML Diagrams. This comes in lieu, as a Child Component does not <code>inherit</code> the Parent Component but only expects changes to shared variables between them.</p>
  
  <p>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.</p>
  
  <h3>Implementation</h3>
  
  <p>According to the <a href="https://angular.io/api/core/OnChanges" rel="nofollow noreferrer">Angular Documentation for onChanges</a> it is an Interface I created an example Diagram as follows </p>
  
  <p><a href="https://i.stack.imgur.com/v1sBJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v1sBJ.png" alt="enter image description here"></a></p>
  
  <p>it think from <strong>UML 1.4.2</strong><sup>[<a href="http://www.uml-diagrams.org/class-diagrams-overview.html#object-diagram" rel="nofollow noreferrer">source</a>]</sup> onwards Object diagrams are obsolete so as of time being I created <code>&lt;&lt;use&gt;&gt;</code> tag for showing an instance of class within the class. It is wrong but just as an example here since <code>EventEmitter</code> according to the Documentation is a class and one tends to use <code>event = new EventEmitter()</code> in code.</p>
  
  <h3>Note</h3>
  
  <p>Above figure created using <a href="http://plantuml.com" rel="nofollow noreferrer">PlantUML</a> which provides methods to change the diagrams accordingly.</p>