Angular Material Tab not selected if app is not loaded by default










0















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?










share|improve this question






















  • 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















0















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?










share|improve this question






















  • 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













0












0








0








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?










share|improve this question














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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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

















  • 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












1 Answer
1






active

oldest

votes


















0














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.






share|improve this answer

























  • Thanks Marshal for the detailed explanation. I'll try to find reasonable workarounds

    – user3865946
    Nov 14 '18 at 16:52










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


















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









0














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.






share|improve this answer

























  • Thanks Marshal for the detailed explanation. I'll try to find reasonable workarounds

    – user3865946
    Nov 14 '18 at 16:52















0














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.






share|improve this answer

























  • Thanks Marshal for the detailed explanation. I'll try to find reasonable workarounds

    – user3865946
    Nov 14 '18 at 16:52













0












0








0







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.






share|improve this answer















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.







share|improve this answer














share|improve this answer



share|improve this answer








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

















  • 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



















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














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





















































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







Popular posts from this blog

Use pre created SQLite database for Android project in kotlin

Darth Vader #20

Ondo