Mixing
Using imported module inside the @Component
3
I'm trying the set the templateUrl based on a module property that I imported it before the @Component , i.e -
import { details } from './details';
@Component({
selector: 'app-my-cmp',
templateUrl: details.typeA ? './pageA.html' : './pageB.html'
})
When I'm making that I'm getting an error - Module not found,
But when I use the imported module within the ngOnInit() I have an access to this module.
How can I use the imported module in the templateUrl line ?
javascript angular angular6
asked Nov 21 '18 at 11:41
URL87URL87
3,9222180140
add a comment |
3
I'm trying the set the templateUrl based on a module property that I imported it before the @Component , i.e -
import { details } from './details';
@Component({
selector: 'app-my-cmp',
templateUrl: details.typeA ? './pageA.html' : './pageB.html'
})
When I'm making that I'm getting an error - Module not found,
But when I use the imported module within the ngOnInit() I have an access to this module.
How can I use the imported module in the templateUrl line ?
javascript angular angular6
asked Nov 21 '18 at 11:41
URL87URL87
3,9222180140
try to assigndetailsto variable then use that variable in ternary
– Artyom Amiryan
Nov 21 '18 at 11:51
add a comment |
3
3
3
I'm trying the set the templateUrl based on a module property that I imported it before the @Component , i.e -
import { details } from './details';
@Component({
selector: 'app-my-cmp',
templateUrl: details.typeA ? './pageA.html' : './pageB.html'
})
When I'm making that I'm getting an error - Module not found,
But when I use the imported module within the ngOnInit() I have an access to this module.
How can I use the imported module in the templateUrl line ?
javascript angular angular6
asked Nov 21 '18 at 11:41
URL87URL87
3,9222180140
I'm trying the set the templateUrl based on a module property that I imported it before the @Component , i.e -
import { details } from './details';
@Component({
selector: 'app-my-cmp',
templateUrl: details.typeA ? './pageA.html' : './pageB.html'
})
When I'm making that I'm getting an error - Module not found,
But when I use the imported module within the ngOnInit() I have an access to this module.
How can I use the imported module in the templateUrl line ?
javascript angular angular6
javascript angular angular6
asked Nov 21 '18 at 11:41
URL87URL87
3,9222180140
asked Nov 21 '18 at 11:41
URL87URL87
3,9222180140
asked Nov 21 '18 at 11:41
URL87URL87
3,9222180140
asked Nov 21 '18 at 11:41
URL87URL87
3,9222180140
asked Nov 21 '18 at 11:41
URL87URL87
3,9222180140
3,9222180140
try to assigndetailsto variable then use that variable in ternary
– Artyom Amiryan
Nov 21 '18 at 11:51
add a comment |
try to assigndetailsto variable then use that variable in ternary
– Artyom Amiryan
Nov 21 '18 at 11:51
try to assign
details to variable then use that variable in ternary– Artyom Amiryan
Nov 21 '18 at 11:51
try to assign
details to variable then use that variable in ternary– Artyom Amiryan
Nov 21 '18 at 11:51
add a comment |
1 Answer
1
active
oldest
votes
2
Just another solution.
You can achieve this using ng-template and then dynamically update the template accordingly your condition like this -
import {
Compiler, Component, Injector, VERSION, ViewChild, NgModule, NgModuleRef,
ViewContainerRef
} from '@angular/core';
@Component({
selector: 'my-app',
template: `<ng-container #vc></ng-container>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
@ViewChild('vc', {read: ViewContainerRef}) vc;
conditionValue = 'myCondition';
constructor(
private _compiler: Compiler,
private _injector: Injector,
private _m: NgModuleRef<any>
) {
}
ngOnInit() {
let tmpCmp;
if (this.conditionValue === 'myCondition') {
tmpCmp = Component({
templateUrl: './e.html'})(class {
});
} else {
// something else
}
const tmpModule = NgModule({declarations: [tmpCmp]})(class { });
this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
.then((factories) => {
const f = factories.componentFactories[0];
const cmpRef = f.create(this._injector, , null, this._m);
cmpRef.instance.name = 'dynamic';
this.vc.insert(cmpRef.hostView);
})
}
}
#Example
For more info, refer -
- https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e
answered Nov 21 '18 at 11:59
Pardeep JainPardeep Jain
39.5k16102139
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411297%2fusing-imported-module-inside-the-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Just another solution.
You can achieve this using ng-template and then dynamically update the template accordingly your condition like this -
import {
Compiler, Component, Injector, VERSION, ViewChild, NgModule, NgModuleRef,
ViewContainerRef
} from '@angular/core';
@Component({
selector: 'my-app',
template: `<ng-container #vc></ng-container>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
@ViewChild('vc', {read: ViewContainerRef}) vc;
conditionValue = 'myCondition';
constructor(
private _compiler: Compiler,
private _injector: Injector,
private _m: NgModuleRef<any>
) {
}
ngOnInit() {
let tmpCmp;
if (this.conditionValue === 'myCondition') {
tmpCmp = Component({
templateUrl: './e.html'})(class {
});
} else {
// something else
}
const tmpModule = NgModule({declarations: [tmpCmp]})(class { });
this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
.then((factories) => {
const f = factories.componentFactories[0];
const cmpRef = f.create(this._injector, , null, this._m);
cmpRef.instance.name = 'dynamic';
this.vc.insert(cmpRef.hostView);
})
}
}
#Example
For more info, refer -
- https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e
answered Nov 21 '18 at 11:59
Pardeep JainPardeep Jain
39.5k16102139
add a comment |
2
Just another solution.
You can achieve this using ng-template and then dynamically update the template accordingly your condition like this -
import {
Compiler, Component, Injector, VERSION, ViewChild, NgModule, NgModuleRef,
ViewContainerRef
} from '@angular/core';
@Component({
selector: 'my-app',
template: `<ng-container #vc></ng-container>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
@ViewChild('vc', {read: ViewContainerRef}) vc;
conditionValue = 'myCondition';
constructor(
private _compiler: Compiler,
private _injector: Injector,
private _m: NgModuleRef<any>
) {
}
ngOnInit() {
let tmpCmp;
if (this.conditionValue === 'myCondition') {
tmpCmp = Component({
templateUrl: './e.html'})(class {
});
} else {
// something else
}
const tmpModule = NgModule({declarations: [tmpCmp]})(class { });
this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
.then((factories) => {
const f = factories.componentFactories[0];
const cmpRef = f.create(this._injector, , null, this._m);
cmpRef.instance.name = 'dynamic';
this.vc.insert(cmpRef.hostView);
})
}
}
#Example
For more info, refer -
- https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e
answered Nov 21 '18 at 11:59
Pardeep JainPardeep Jain
39.5k16102139
add a comment |
2
2
2
Just another solution.
You can achieve this using ng-template and then dynamically update the template accordingly your condition like this -
import {
Compiler, Component, Injector, VERSION, ViewChild, NgModule, NgModuleRef,
ViewContainerRef
} from '@angular/core';
@Component({
selector: 'my-app',
template: `<ng-container #vc></ng-container>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
@ViewChild('vc', {read: ViewContainerRef}) vc;
conditionValue = 'myCondition';
constructor(
private _compiler: Compiler,
private _injector: Injector,
private _m: NgModuleRef<any>
) {
}
ngOnInit() {
let tmpCmp;
if (this.conditionValue === 'myCondition') {
tmpCmp = Component({
templateUrl: './e.html'})(class {
});
} else {
// something else
}
const tmpModule = NgModule({declarations: [tmpCmp]})(class { });
this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
.then((factories) => {
const f = factories.componentFactories[0];
const cmpRef = f.create(this._injector, , null, this._m);
cmpRef.instance.name = 'dynamic';
this.vc.insert(cmpRef.hostView);
})
}
}
#Example
For more info, refer -
- https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e
answered Nov 21 '18 at 11:59
Pardeep JainPardeep Jain
39.5k16102139
Just another solution.
You can achieve this using ng-template and then dynamically update the template accordingly your condition like this -
import {
Compiler, Component, Injector, VERSION, ViewChild, NgModule, NgModuleRef,
ViewContainerRef
} from '@angular/core';
@Component({
selector: 'my-app',
template: `<ng-container #vc></ng-container>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
@ViewChild('vc', {read: ViewContainerRef}) vc;
conditionValue = 'myCondition';
constructor(
private _compiler: Compiler,
private _injector: Injector,
private _m: NgModuleRef<any>
) {
}
ngOnInit() {
let tmpCmp;
if (this.conditionValue === 'myCondition') {
tmpCmp = Component({
templateUrl: './e.html'})(class {
});
} else {
// something else
}
const tmpModule = NgModule({declarations: [tmpCmp]})(class { });
this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
.then((factories) => {
const f = factories.componentFactories[0];
const cmpRef = f.create(this._injector, , null, this._m);
cmpRef.instance.name = 'dynamic';
this.vc.insert(cmpRef.hostView);
})
}
}
#Example
For more info, refer -
- https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e
answered Nov 21 '18 at 11:59
Pardeep JainPardeep Jain
39.5k16102139
answered Nov 21 '18 at 11:59
Pardeep JainPardeep Jain
39.5k16102139
answered Nov 21 '18 at 11:59
Pardeep JainPardeep Jain
39.5k16102139
answered Nov 21 '18 at 11:59
Pardeep JainPardeep Jain
39.5k16102139
39.5k16102139
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411297%2fusing-imported-module-inside-the-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
try to assign
detailsto variable then use that variable in ternary– Artyom Amiryan
Nov 21 '18 at 11:51