Angular Material Tab not selected if app is not loaded by default
In this example, the tab 'Raised Button' is selected by default
https://stackblitz.com/edit/angular-material?file=index.html
On modifying the html to have the app loaded after a button click, the tab is not selected by default
https://stackblitz.com/edit/angular-material-smmas7?file=index.html
Are there modifications I can make to the app to have tab selected by default even if app is loaded after a button click?
angular angular-material
add a comment |
In this example, the tab 'Raised Button' is selected by default
https://stackblitz.com/edit/angular-material?file=index.html
On modifying the html to have the app loaded after a button click, the tab is not selected by default
https://stackblitz.com/edit/angular-material-smmas7?file=index.html
Are there modifications I can make to the app to have tab selected by default even if app is loaded after a button click?
angular angular-material
I do not know why you want to use external JS to manipulate Angular Material. You can achieve it all within Angular framework scope.
– wannadream
Nov 13 '18 at 22:20
The idea is to have an isolated angular app which does its thing. Only I want this app to be displayed when user specifically requests for it (with a button click in my example)
– user3865946
Nov 14 '18 at 16:54
add a comment |
In this example, the tab 'Raised Button' is selected by default
https://stackblitz.com/edit/angular-material?file=index.html
On modifying the html to have the app loaded after a button click, the tab is not selected by default
https://stackblitz.com/edit/angular-material-smmas7?file=index.html
Are there modifications I can make to the app to have tab selected by default even if app is loaded after a button click?
angular angular-material
In this example, the tab 'Raised Button' is selected by default
https://stackblitz.com/edit/angular-material?file=index.html
On modifying the html to have the app loaded after a button click, the tab is not selected by default
https://stackblitz.com/edit/angular-material-smmas7?file=index.html
Are there modifications I can make to the app to have tab selected by default even if app is loaded after a button click?
angular angular-material
angular angular-material
asked Nov 13 '18 at 21:29
user3865946user3865946
182
182
I do not know why you want to use external JS to manipulate Angular Material. You can achieve it all within Angular framework scope.
– wannadream
Nov 13 '18 at 22:20
The idea is to have an isolated angular app which does its thing. Only I want this app to be displayed when user specifically requests for it (with a button click in my example)
– user3865946
Nov 14 '18 at 16:54
add a comment |
I do not know why you want to use external JS to manipulate Angular Material. You can achieve it all within Angular framework scope.
– wannadream
Nov 13 '18 at 22:20
The idea is to have an isolated angular app which does its thing. Only I want this app to be displayed when user specifically requests for it (with a button click in my example)
– user3865946
Nov 14 '18 at 16:54
I do not know why you want to use external JS to manipulate Angular Material. You can achieve it all within Angular framework scope.
– wannadream
Nov 13 '18 at 22:20
I do not know why you want to use external JS to manipulate Angular Material. You can achieve it all within Angular framework scope.
– wannadream
Nov 13 '18 at 22:20
The idea is to have an isolated angular app which does its thing. Only I want this app to be displayed when user specifically requests for it (with a button click in my example)
– user3865946
Nov 14 '18 at 16:54
The idea is to have an isolated angular app which does its thing. Only I want this app to be displayed when user specifically requests for it (with a button click in my example)
– user3865946
Nov 14 '18 at 16:54
add a comment |
1 Answer
1
active
oldest
votes
Technically the app/component is already loaded, you are only hiding it... so you are not loading the component with button click, only allowing it to be viewed by button click.
If you implement OnInit in your class and do a console log you will
see that the component has been initialized before you even click
the button.export class AppComponent implements OnInit
ngOnInit()
console.log('AppComponent Initialized');
Then if you add console.log(document.activeElement);
into your show method in index.html you will see that your button actually still has focus after it has been clicked; this is the reason your component isn't receiving focus and ultimately why the ink bar is not being displayed...
An element outside of your component has the focus at the index.html level and because of the way you are exposing the view of your component in a non angular way it is impacting the component.
function show()
document.getElementById("foo").style.display = "block";
console.log(document.activeElement);
Results in the following output via console when the button is clicked showing the button has the focus.
<input type="button" value="Click" onclick="show()">
Because your component has already been initialized in the background, you are missing the opportunity to leverage the lifecycle hooks to solve this... because they have already been called in the background you have no way to programmatically set focus inside your component when the button in the index.html is clicked... or at least a way that I would recommend.
Per the comment, explore finding a true angular way of doing this that utilizes the framework properly, this is not the way to go about doing this... it also is not doing what you think it is.
Thanks Marshal for the detailed explanation. I'll try to find reasonable workarounds
– user3865946
Nov 14 '18 at 16:52
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%2f53289778%2fangular-material-tab-not-selected-if-app-is-not-loaded-by-default%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
Technically the app/component is already loaded, you are only hiding it... so you are not loading the component with button click, only allowing it to be viewed by button click.
If you implement OnInit in your class and do a console log you will
see that the component has been initialized before you even click
the button.export class AppComponent implements OnInit
ngOnInit()
console.log('AppComponent Initialized');
Then if you add console.log(document.activeElement);
into your show method in index.html you will see that your button actually still has focus after it has been clicked; this is the reason your component isn't receiving focus and ultimately why the ink bar is not being displayed...
An element outside of your component has the focus at the index.html level and because of the way you are exposing the view of your component in a non angular way it is impacting the component.
function show()
document.getElementById("foo").style.display = "block";
console.log(document.activeElement);
Results in the following output via console when the button is clicked showing the button has the focus.
<input type="button" value="Click" onclick="show()">
Because your component has already been initialized in the background, you are missing the opportunity to leverage the lifecycle hooks to solve this... because they have already been called in the background you have no way to programmatically set focus inside your component when the button in the index.html is clicked... or at least a way that I would recommend.
Per the comment, explore finding a true angular way of doing this that utilizes the framework properly, this is not the way to go about doing this... it also is not doing what you think it is.
Thanks Marshal for the detailed explanation. I'll try to find reasonable workarounds
– user3865946
Nov 14 '18 at 16:52
add a comment |
Technically the app/component is already loaded, you are only hiding it... so you are not loading the component with button click, only allowing it to be viewed by button click.
If you implement OnInit in your class and do a console log you will
see that the component has been initialized before you even click
the button.export class AppComponent implements OnInit
ngOnInit()
console.log('AppComponent Initialized');
Then if you add console.log(document.activeElement);
into your show method in index.html you will see that your button actually still has focus after it has been clicked; this is the reason your component isn't receiving focus and ultimately why the ink bar is not being displayed...
An element outside of your component has the focus at the index.html level and because of the way you are exposing the view of your component in a non angular way it is impacting the component.
function show()
document.getElementById("foo").style.display = "block";
console.log(document.activeElement);
Results in the following output via console when the button is clicked showing the button has the focus.
<input type="button" value="Click" onclick="show()">
Because your component has already been initialized in the background, you are missing the opportunity to leverage the lifecycle hooks to solve this... because they have already been called in the background you have no way to programmatically set focus inside your component when the button in the index.html is clicked... or at least a way that I would recommend.
Per the comment, explore finding a true angular way of doing this that utilizes the framework properly, this is not the way to go about doing this... it also is not doing what you think it is.
Thanks Marshal for the detailed explanation. I'll try to find reasonable workarounds
– user3865946
Nov 14 '18 at 16:52
add a comment |
Technically the app/component is already loaded, you are only hiding it... so you are not loading the component with button click, only allowing it to be viewed by button click.
If you implement OnInit in your class and do a console log you will
see that the component has been initialized before you even click
the button.export class AppComponent implements OnInit
ngOnInit()
console.log('AppComponent Initialized');
Then if you add console.log(document.activeElement);
into your show method in index.html you will see that your button actually still has focus after it has been clicked; this is the reason your component isn't receiving focus and ultimately why the ink bar is not being displayed...
An element outside of your component has the focus at the index.html level and because of the way you are exposing the view of your component in a non angular way it is impacting the component.
function show()
document.getElementById("foo").style.display = "block";
console.log(document.activeElement);
Results in the following output via console when the button is clicked showing the button has the focus.
<input type="button" value="Click" onclick="show()">
Because your component has already been initialized in the background, you are missing the opportunity to leverage the lifecycle hooks to solve this... because they have already been called in the background you have no way to programmatically set focus inside your component when the button in the index.html is clicked... or at least a way that I would recommend.
Per the comment, explore finding a true angular way of doing this that utilizes the framework properly, this is not the way to go about doing this... it also is not doing what you think it is.
Technically the app/component is already loaded, you are only hiding it... so you are not loading the component with button click, only allowing it to be viewed by button click.
If you implement OnInit in your class and do a console log you will
see that the component has been initialized before you even click
the button.export class AppComponent implements OnInit
ngOnInit()
console.log('AppComponent Initialized');
Then if you add console.log(document.activeElement);
into your show method in index.html you will see that your button actually still has focus after it has been clicked; this is the reason your component isn't receiving focus and ultimately why the ink bar is not being displayed...
An element outside of your component has the focus at the index.html level and because of the way you are exposing the view of your component in a non angular way it is impacting the component.
function show()
document.getElementById("foo").style.display = "block";
console.log(document.activeElement);
Results in the following output via console when the button is clicked showing the button has the focus.
<input type="button" value="Click" onclick="show()">
Because your component has already been initialized in the background, you are missing the opportunity to leverage the lifecycle hooks to solve this... because they have already been called in the background you have no way to programmatically set focus inside your component when the button in the index.html is clicked... or at least a way that I would recommend.
Per the comment, explore finding a true angular way of doing this that utilizes the framework properly, this is not the way to go about doing this... it also is not doing what you think it is.
edited Nov 14 '18 at 0:09
answered Nov 13 '18 at 23:47
MarshalMarshal
2,9022418
2,9022418
Thanks Marshal for the detailed explanation. I'll try to find reasonable workarounds
– user3865946
Nov 14 '18 at 16:52
add a comment |
Thanks Marshal for the detailed explanation. I'll try to find reasonable workarounds
– user3865946
Nov 14 '18 at 16:52
Thanks Marshal for the detailed explanation. I'll try to find reasonable workarounds
– user3865946
Nov 14 '18 at 16:52
Thanks Marshal for the detailed explanation. I'll try to find reasonable workarounds
– user3865946
Nov 14 '18 at 16:52
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%2f53289778%2fangular-material-tab-not-selected-if-app-is-not-loaded-by-default%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
I do not know why you want to use external JS to manipulate Angular Material. You can achieve it all within Angular framework scope.
– wannadream
Nov 13 '18 at 22:20
The idea is to have an isolated angular app which does its thing. Only I want this app to be displayed when user specifically requests for it (with a button click in my example)
– user3865946
Nov 14 '18 at 16:54