How can I apply toggle switch between light and dark theme in AngularDart

Question

I want to apply a toggle between dark and light theme in AngularDart.

app_component

<material-icon icon="brightness_2" 
               class="material-list-item-primary"
               aria-hidden="true"></material-icon>
Dark Theme
<span class="material-list-item-secondary">
<material-toggle [checked]="dark" label="Off">
</material-toggle>
</span>

app_component.dart

class LayoutComponent {
  bool dark = false;
 }

Answer 1

I haven't tried but I think this is the way to do it. Wrap your applications content into a component different from your root component and use *ngIf to enable the dark or non-dark version.

This will destroy and recreate all components. Therefore keeping the application status in global services might be a good idea.

app_component.html

<material-toggle [checked]="dark" label="Off"></material-toggle>    
<my-app-inner *ngIf="!dark"></my-app-inner>
<my-app-inner *ngIf="dark" darkTheme></my-app-inner>

ensure DarkThemeDirective is listed in

directives: [DarkThemeDirective]

You can put the <material-toggle> everywhere in your application, you just need to ensure that the value *ngIf is bound to is updated accordingly.