title: Angular toggle button to add text to p tag
body: <p>I have a toggle button , which when clicked should add text 'Dark' to the <p> tag. When clicked again should replace with 'Light'. Initially there shouldn't be anything.Suppose to use `</p>
  <pre><code>@Component({
    selector: 'darkmode-toggler',
    template: `
      &lt;div&gt;
        &lt;button&gt;Toggle dark mode&lt;/button&gt;
        &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
    `,
    styles: []
  })
  export class DarkModeToggler {}
  
  @Component({
    selector: 'app-root',
    template: `
      &lt;div&gt;
        &lt;darkmode-toggler (stateChanged)=&quot;handleStateChange($event)&quot;&gt; 
        &lt;/darkmode-toggler&gt;
      &lt;/div&gt;
    `,
    styles: []
  })
  export class Resource {  
    handleStateChange(event) {
      console.log(event);  
    }
  }
  </code></pre>