What prevents component from rendering when all directives are present?

Issue

EDIT 1

See my answer. Bit odd, but it works like that.

EDIT 2
(Thanks to Gunter)
Seems could be some caching issue or Webstorm maybe. Not sure. Not a code issue though.

ORIGINAL QUESTION

Pretty simple template:

<div *ngIf="getToken() == null">
 <login-component></login-component>
</div>
<div *ngIf="getToken() != null">
 <dashboard-component></dashboard-component>
</div>

Where the corresponding HTML template for dashboard-component contains some simple HTML just for testing purposes:

<h1>Dashboard component loaded & rendered</h1>

The problem: I never actually see the dashboard component being rendered.

Code details

Directives are set up in AppComponent as usual:

@Component(
 selector: 'management-app',
 styleUrls: const ['app_component.css'],
 templateUrl: 'app_component.html',
 directives: const [CORE_DIRECTIVES, materialDirectives, DashboardComponent, LoginComponent],
 providers: const [materialProviders],
)
class AppComponent

The login renders fine, and I can put some credentials in, which makes getToken() != null yield true, and the screen goes blank. I tried this to make sure it works:

<div *ngIf="getToken() == null">
 <login-component></login-component>
</div>
<div *ngIf="getToken() != null">
 <h1>It worked!</h1>
</div>

And indeed I see It worked!.

So on to dashboard-component:

@Component(
 selector: 'dashboard-component',
 styleUrls: const ['package:angular_components/app_layout/layout.scss.css','dashboard_component.css'],
 templateUrl: 'dashboard_component.html',
 directives: const [CORE_DIRECTIVES,materialDirectives,],
 providers: const [DashboardService],
)
class DashboardComponent 

What am i missing to get the component to render correctly?

Solution

Randomly I tried this:

<div>
 <h1>Dashboard component loaded & rendered</h1>
</div>

And it worked as expected. I wasn’t aware you have to wrap the template as such. Maybe there’s a more general rule that someone can explain…

Answered By – Manish Patel

Answer Checked By – Willingham (FlutterFixes Volunteer)