CODEWITHSUNDEEP
angularivyngtemplateoutlet
Marc Reitec
Marc Reitec

Reputation: 119

Can't bind to 'ngTemplateOutlet' since it isn't a known property of 'ng-container'

It seem to be a problem of the '@angular/common' module and the ivy compiler? Any ideas? Deleting node_modules and updating angular does not have any success.

        <!-- Define our template -->
        <ng-template #myTemplate> World! </ng-template>

        Hello
        <!-- Render the template in this outlet -->
        <ng-container [ngTemplateOutlet]="myTemplate"></ng-container>

If I try ...*ngTemplateOutlet=... then I get this Error at runtime: NG0303: Can't bind to 'ngTemplateOutlet' since it isn't a known property of 'ng-container'. node_modules/@angular/core/ivy_ngcc/fesm2015/core.js:10073

Angular Version 11

Upvotes: 8

Views: 24895

Answers (5)

Pragya Tripathi
Pragya Tripathi

Reputation: 1

Please import PortalModule in the below section, or you can import in your module if defined.

@Component({ selector: ...., standalone: true/false, imports: [ PortalModule], templateUrl: '.....', })

Upvotes: 0

Kyrolus Kamal Fahim Sous
Kyrolus Kamal Fahim Sous

Reputation: 1038

The problem is that you need to import it from CommonModule.

However, now in Angular 15+, you can import NgTemplateOutlet only becasue in Angular 15 you can import what you realy need in your component instead of importing all the directives in the CommonModule

Upvotes: 22

Lars Aicher
Lars Aicher

Reputation: 31

Another pitfall leading to this error is, that you can't use the property binding syntax [ngTemplateOutletContext] when you are using the *ngTemplateOutlet directive. So you have to stick with the property binding [ngTemplateOutlet] for the template as well.

 <ng-container [ngTemplateOutlet]="myButtonTemplate" [ngTemplateOutletContext]="{ textResourceKey: 'Click_Me' }"></ng-container>

Upvotes: 1

Elias
Elias

Reputation: 4122

This may also happen when some sort of mock component, or similar, is not passed to the test bed while testing.

If you have something similar to this in your test:

@Component({
  template: `
    <ng-container *ngTemplateOutlet="test"></ng-container>
    <ng-template #test>Test</ng-template>
  `,
})
class MockComponent {}

You will need to pass that to the TestBed like so:

await TestBed.configureTestingModule({
  declarations: [MockComponent],
}).compileComponents();

According to my testing, not doing that, will result in only the core features of angular working, and the ngTemplateOutlet directive is in the CommonModule.

Upvotes: 0

Marc Reitec
Marc Reitec

Reputation: 119

It was a confusion of app.module.ts (that in fact imported BrowserModule) and app-routing.module.ts in the DevExtreme Template. After I add BrowserModule in app-routing.module.ts to @NgModule({ imports: it works as expected. @Ilia Komarov: Thanks! You have been also right with your solution!

Upvotes: 3

Related Questions