ng-container => blank page bug in Ionic
In order to have a clean and DRY ionic project, I just wanted my navbar code to be written in one place, instead of writing the whole HTML in every Ionic page.
For this purpose, I created an Angular component (not an Ionic page) named navbar, and I inject it in my pages. To keep a clean layout with no additional stuff in the DOM, I created a component with the brackets notation, like this:
@Component({
// brackets let the selector be used as a property instead of a component
selector: '[navbar]',
templateUrl: 'navbar.html',
})
export class NavbarComponent {
@Input() title: string = 'default title';
constructor() {}
}
Then I try to inject the component in the pages like this:
<ng-container navbar title="My good title"></ng-container>
The purpose is to not create any additional node in the DOM to keep clean layout.
But, this DOES NOT WORK, as I get a blank page with no particular error in console.
As a comparison,
<div navbar title="My good title"></div>
works, but my layout is broken (ion content starts from the very top of my page, beeing hidden by navbar)
Any idea? Thanks.
// navbar.html code
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="ios-menu"></ion-icon>
</button>
<ion-title>{{title}}</ion-title>
<ion-buttons margin-horizontal end>
<img class="logo-navbar" src="../../assets/imgs/logo-hudi-noir-noborder.png">
</ion-buttons>
</ion-navbar>
</ion-header>
ionic (Ionic CLI) : 4.1.2
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.9
angular ionic-framework asked Nov 28 '18 at 16:56
David D.David D.
3,72122569
add a comment |
In order to have a clean and DRY ionic project, I just wanted my navbar code to be written in one place, instead of writing the whole HTML in every Ionic page.
For this purpose, I created an Angular component (not an Ionic page) named navbar, and I inject it in my pages. To keep a clean layout with no additional stuff in the DOM, I created a component with the brackets notation, like this:
@Component({
// brackets let the selector be used as a property instead of a component
selector: '[navbar]',
templateUrl: 'navbar.html',
})
export class NavbarComponent {
@Input() title: string = 'default title';
constructor() {}
}
Then I try to inject the component in the pages like this:
<ng-container navbar title="My good title"></ng-container>
The purpose is to not create any additional node in the DOM to keep clean layout.
But, this DOES NOT WORK, as I get a blank page with no particular error in console.
As a comparison,
<div navbar title="My good title"></div>
works, but my layout is broken (ion content starts from the very top of my page, beeing hidden by navbar)
Any idea? Thanks.
// navbar.html code
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="ios-menu"></ion-icon>
</button>
<ion-title>{{title}}</ion-title>
<ion-buttons margin-horizontal end>
<img class="logo-navbar" src="../../assets/imgs/logo-hudi-noir-noborder.png">
</ion-buttons>
</ion-navbar>
</ion-header>
ionic (Ionic CLI) : 4.1.2
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.9
angular ionic-framework asked Nov 28 '18 at 16:56
David D.David D.
3,72122569
Are you importing the component module into ionic page module?
– Aragorn
Nov 28 '18 at 17:31
you need to post the code to your root module. Also, installing the Augury chrome extension will help you debug the issue. I know it has helped me when getting the white screens.
– Michael Henderson
Nov 28 '18 at 18:32
add a comment |
In order to have a clean and DRY ionic project, I just wanted my navbar code to be written in one place, instead of writing the whole HTML in every Ionic page.
For this purpose, I created an Angular component (not an Ionic page) named navbar, and I inject it in my pages. To keep a clean layout with no additional stuff in the DOM, I created a component with the brackets notation, like this:
@Component({
// brackets let the selector be used as a property instead of a component
selector: '[navbar]',
templateUrl: 'navbar.html',
})
export class NavbarComponent {
@Input() title: string = 'default title';
constructor() {}
}
Then I try to inject the component in the pages like this:
<ng-container navbar title="My good title"></ng-container>
The purpose is to not create any additional node in the DOM to keep clean layout.
But, this DOES NOT WORK, as I get a blank page with no particular error in console.
As a comparison,
<div navbar title="My good title"></div>
works, but my layout is broken (ion content starts from the very top of my page, beeing hidden by navbar)
Any idea? Thanks.
// navbar.html code
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="ios-menu"></ion-icon>
</button>
<ion-title>{{title}}</ion-title>
<ion-buttons margin-horizontal end>
<img class="logo-navbar" src="../../assets/imgs/logo-hudi-noir-noborder.png">
</ion-buttons>
</ion-navbar>
</ion-header>
ionic (Ionic CLI) : 4.1.2
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.9
angular ionic-framework asked Nov 28 '18 at 16:56
David D.David D.
3,72122569
In order to have a clean and DRY ionic project, I just wanted my navbar code to be written in one place, instead of writing the whole HTML in every Ionic page.
For this purpose, I created an Angular component (not an Ionic page) named navbar, and I inject it in my pages. To keep a clean layout with no additional stuff in the DOM, I created a component with the brackets notation, like this:
@Component({
// brackets let the selector be used as a property instead of a component
selector: '[navbar]',
templateUrl: 'navbar.html',
})
export class NavbarComponent {
@Input() title: string = 'default title';
constructor() {}
}
Then I try to inject the component in the pages like this:
<ng-container navbar title="My good title"></ng-container>
The purpose is to not create any additional node in the DOM to keep clean layout.
But, this DOES NOT WORK, as I get a blank page with no particular error in console.
As a comparison,
<div navbar title="My good title"></div>
works, but my layout is broken (ion content starts from the very top of my page, beeing hidden by navbar)
Any idea? Thanks.
// navbar.html code
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="ios-menu"></ion-icon>
</button>
<ion-title>{{title}}</ion-title>
<ion-buttons margin-horizontal end>
<img class="logo-navbar" src="../../assets/imgs/logo-hudi-noir-noborder.png">
</ion-buttons>
</ion-navbar>
</ion-header>
ionic (Ionic CLI) : 4.1.2
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.9
angular ionic-framework angular ionic-framework asked Nov 28 '18 at 16:56
David D.David D.
3,72122569
asked Nov 28 '18 at 16:56
David D.David D.
3,72122569
asked Nov 28 '18 at 16:56
David D.David D.
3,72122569
asked Nov 28 '18 at 16:56
David D.David D.
3,72122569
asked Nov 28 '18 at 16:56
David D.David D.
3,72122569
3,72122569
Are you importing the component module into ionic page module?
– Aragorn
Nov 28 '18 at 17:31
you need to post the code to your root module. Also, installing the Augury chrome extension will help you debug the issue. I know it has helped me when getting the white screens.
– Michael Henderson
Nov 28 '18 at 18:32
add a comment |
Are you importing the component module into ionic page module?
– Aragorn
Nov 28 '18 at 17:31
you need to post the code to your root module. Also, installing the Augury chrome extension will help you debug the issue. I know it has helped me when getting the white screens.
– Michael Henderson
Nov 28 '18 at 18:32
Are you importing the component module into ionic page module?
– Aragorn
Nov 28 '18 at 17:31
Are you importing the component module into ionic page module?
– Aragorn
Nov 28 '18 at 17:31
you need to post the code to your root module. Also, installing the Augury chrome extension will help you debug the issue. I know it has helped me when getting the white screens.
– Michael Henderson
Nov 28 '18 at 18:32
you need to post the code to your root module. Also, installing the Augury chrome extension will help you debug the issue. I know it has helped me when getting the white screens.
– Michael Henderson
Nov 28 '18 at 18:32
add a comment |
1 Answer
1
active
oldest
votes
You can apply the navbar attribute to the ion-header element:
<ion-header navbar title="My good title"></ion-header>
and define the NavbarComponent as the content of that element:
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="ios-menu"></ion-icon>
</button>
<ion-title>{{title}}</ion-title>
<ion-buttons margin-horizontal end>
<img class="logo-navbar" src="../../assets/imgs/logo-hudi-noir-noborder.png">
</ion-buttons>
</ion-navbar>
See this stackblitz for a demo.
answered Nov 28 '18 at 19:26
ConnorsFanConnorsFan
32k43464
This works, thanks a lot. May I ask you to elaborate about why my solution did not work first? Thanks again.
– David D.
Nov 28 '18 at 19:39
When setting thenavbarattribute on an element, it appears that the element becomes the parent of theNavbarComponentcontent. Sinceng-containeris not rendered at all in the HTML ouput, the component ends up with no parent. By the way, maybe the title of the question could be changed to something like "Reusable Ionic navbar component"
– ConnorsFan
Nov 28 '18 at 20:06
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
});
}
});
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%2f53524482%2fng-container-blank-page-bug-in-ionic%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
You can apply the navbar attribute to the ion-header element:
<ion-header navbar title="My good title"></ion-header>
and define the NavbarComponent as the content of that element:
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="ios-menu"></ion-icon>
</button>
<ion-title>{{title}}</ion-title>
<ion-buttons margin-horizontal end>
<img class="logo-navbar" src="../../assets/imgs/logo-hudi-noir-noborder.png">
</ion-buttons>
</ion-navbar>
See this stackblitz for a demo.
answered Nov 28 '18 at 19:26
ConnorsFanConnorsFan
32k43464
This works, thanks a lot. May I ask you to elaborate about why my solution did not work first? Thanks again.
– David D.
Nov 28 '18 at 19:39
When setting thenavbarattribute on an element, it appears that the element becomes the parent of theNavbarComponentcontent. Sinceng-containeris not rendered at all in the HTML ouput, the component ends up with no parent. By the way, maybe the title of the question could be changed to something like "Reusable Ionic navbar component"
– ConnorsFan
Nov 28 '18 at 20:06
add a comment |
You can apply the navbar attribute to the ion-header element:
<ion-header navbar title="My good title"></ion-header>
and define the NavbarComponent as the content of that element:
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="ios-menu"></ion-icon>
</button>
<ion-title>{{title}}</ion-title>
<ion-buttons margin-horizontal end>
<img class="logo-navbar" src="../../assets/imgs/logo-hudi-noir-noborder.png">
</ion-buttons>
</ion-navbar>
See this stackblitz for a demo.
answered Nov 28 '18 at 19:26
ConnorsFanConnorsFan
32k43464
This works, thanks a lot. May I ask you to elaborate about why my solution did not work first? Thanks again.
– David D.
Nov 28 '18 at 19:39
When setting thenavbarattribute on an element, it appears that the element becomes the parent of theNavbarComponentcontent. Sinceng-containeris not rendered at all in the HTML ouput, the component ends up with no parent. By the way, maybe the title of the question could be changed to something like "Reusable Ionic navbar component"
– ConnorsFan
Nov 28 '18 at 20:06
add a comment |
You can apply the navbar attribute to the ion-header element:
<ion-header navbar title="My good title"></ion-header>
and define the NavbarComponent as the content of that element:
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="ios-menu"></ion-icon>
</button>
<ion-title>{{title}}</ion-title>
<ion-buttons margin-horizontal end>
<img class="logo-navbar" src="../../assets/imgs/logo-hudi-noir-noborder.png">
</ion-buttons>
</ion-navbar>
See this stackblitz for a demo.
answered Nov 28 '18 at 19:26
ConnorsFanConnorsFan
32k43464
You can apply the navbar attribute to the ion-header element:
<ion-header navbar title="My good title"></ion-header>
and define the NavbarComponent as the content of that element:
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="ios-menu"></ion-icon>
</button>
<ion-title>{{title}}</ion-title>
<ion-buttons margin-horizontal end>
<img class="logo-navbar" src="../../assets/imgs/logo-hudi-noir-noborder.png">
</ion-buttons>
</ion-navbar>
See this stackblitz for a demo.
answered Nov 28 '18 at 19:26
ConnorsFanConnorsFan
32k43464
answered Nov 28 '18 at 19:26
ConnorsFanConnorsFan
32k43464
answered Nov 28 '18 at 19:26
ConnorsFanConnorsFan
32k43464
answered Nov 28 '18 at 19:26
ConnorsFanConnorsFan
32k43464
32k43464
This works, thanks a lot. May I ask you to elaborate about why my solution did not work first? Thanks again.
– David D.
Nov 28 '18 at 19:39
When setting thenavbarattribute on an element, it appears that the element becomes the parent of theNavbarComponentcontent. Sinceng-containeris not rendered at all in the HTML ouput, the component ends up with no parent. By the way, maybe the title of the question could be changed to something like "Reusable Ionic navbar component"
– ConnorsFan
Nov 28 '18 at 20:06
add a comment |
This works, thanks a lot. May I ask you to elaborate about why my solution did not work first? Thanks again.
– David D.
Nov 28 '18 at 19:39
When setting thenavbarattribute on an element, it appears that the element becomes the parent of theNavbarComponentcontent. Sinceng-containeris not rendered at all in the HTML ouput, the component ends up with no parent. By the way, maybe the title of the question could be changed to something like "Reusable Ionic navbar component"
– ConnorsFan
Nov 28 '18 at 20:06
This works, thanks a lot. May I ask you to elaborate about why my solution did not work first? Thanks again.
– David D.
Nov 28 '18 at 19:39
This works, thanks a lot. May I ask you to elaborate about why my solution did not work first? Thanks again.
– David D.
Nov 28 '18 at 19:39
When setting the
navbar attribute on an element, it appears that the element becomes the parent of the NavbarComponent content. Since ng-container is not rendered at all in the HTML ouput, the component ends up with no parent. By the way, maybe the title of the question could be changed to something like "Reusable Ionic navbar component"– ConnorsFan
Nov 28 '18 at 20:06
When setting the
navbar attribute on an element, it appears that the element becomes the parent of the NavbarComponent content. Since ng-container is not rendered at all in the HTML ouput, the component ends up with no parent. By the way, maybe the title of the question could be changed to something like "Reusable Ionic navbar component"– ConnorsFan
Nov 28 '18 at 20:06
add a comment |
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.
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%2f53524482%2fng-container-blank-page-bug-in-ionic%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
Are you importing the component module into ionic page module?
– Aragorn
Nov 28 '18 at 17:31
you need to post the code to your root module. Also, installing the Augury chrome extension will help you debug the issue. I know it has helped me when getting the white screens.
– Michael Henderson
Nov 28 '18 at 18:32