angular6: I want my inherited component to have some propertys of the parent











up vote
5
down vote

favorite
2












I have a table where every table-cell is a different instance of a component. Depending on the data (date, text, links) I'm using different components.



As these components have a lot in common I introduced a TableCellMasterComponent which is extended by all other type of table-cells.



All my components have the same host property:



@Component({
selector: 'td[app-text-col]',
templateUrl: './text-col.component.html',
styleUrls: ['./text-col.component.css'],
host: {
"[hidden]": "col.deactivated"
},
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TextColComponent extends TableCellMasterComponent{
}


Is it possible to somehow move this to the TableCellMasterComponent?



Also I would love to give all of them a contextmenu. But as I see it, it isn't possible to add HTML in the Master. Is that true?



Can I move the changeDetection to the Master?










share|improve this question















This question has an open bounty worth +50
reputation from NDDTConti ending in 5 hours.


This question has not received enough attention.
















  • Check out this blog post about Encapsulation. Maybe you'll find what you're looking for.
    – ams
    yesterday















up vote
5
down vote

favorite
2












I have a table where every table-cell is a different instance of a component. Depending on the data (date, text, links) I'm using different components.



As these components have a lot in common I introduced a TableCellMasterComponent which is extended by all other type of table-cells.



All my components have the same host property:



@Component({
selector: 'td[app-text-col]',
templateUrl: './text-col.component.html',
styleUrls: ['./text-col.component.css'],
host: {
"[hidden]": "col.deactivated"
},
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TextColComponent extends TableCellMasterComponent{
}


Is it possible to somehow move this to the TableCellMasterComponent?



Also I would love to give all of them a contextmenu. But as I see it, it isn't possible to add HTML in the Master. Is that true?



Can I move the changeDetection to the Master?










share|improve this question















This question has an open bounty worth +50
reputation from NDDTConti ending in 5 hours.


This question has not received enough attention.
















  • Check out this blog post about Encapsulation. Maybe you'll find what you're looking for.
    – ams
    yesterday













up vote
5
down vote

favorite
2









up vote
5
down vote

favorite
2






2





I have a table where every table-cell is a different instance of a component. Depending on the data (date, text, links) I'm using different components.



As these components have a lot in common I introduced a TableCellMasterComponent which is extended by all other type of table-cells.



All my components have the same host property:



@Component({
selector: 'td[app-text-col]',
templateUrl: './text-col.component.html',
styleUrls: ['./text-col.component.css'],
host: {
"[hidden]": "col.deactivated"
},
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TextColComponent extends TableCellMasterComponent{
}


Is it possible to somehow move this to the TableCellMasterComponent?



Also I would love to give all of them a contextmenu. But as I see it, it isn't possible to add HTML in the Master. Is that true?



Can I move the changeDetection to the Master?










share|improve this question













I have a table where every table-cell is a different instance of a component. Depending on the data (date, text, links) I'm using different components.



As these components have a lot in common I introduced a TableCellMasterComponent which is extended by all other type of table-cells.



All my components have the same host property:



@Component({
selector: 'td[app-text-col]',
templateUrl: './text-col.component.html',
styleUrls: ['./text-col.component.css'],
host: {
"[hidden]": "col.deactivated"
},
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TextColComponent extends TableCellMasterComponent{
}


Is it possible to somehow move this to the TableCellMasterComponent?



Also I would love to give all of them a contextmenu. But as I see it, it isn't possible to add HTML in the Master. Is that true?



Can I move the changeDetection to the Master?







angular inheritance components angular6






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 9 at 10:09









NDDTConti

268




268






This question has an open bounty worth +50
reputation from NDDTConti ending in 5 hours.


This question has not received enough attention.








This question has an open bounty worth +50
reputation from NDDTConti ending in 5 hours.


This question has not received enough attention.














  • Check out this blog post about Encapsulation. Maybe you'll find what you're looking for.
    – ams
    yesterday


















  • Check out this blog post about Encapsulation. Maybe you'll find what you're looking for.
    – ams
    yesterday
















Check out this blog post about Encapsulation. Maybe you'll find what you're looking for.
– ams
yesterday




Check out this blog post about Encapsulation. Maybe you'll find what you're looking for.
– ams
yesterday












2 Answers
2






active

oldest

votes

















up vote
2
down vote













The @Component decorator metadata is not inherited so you cannot move some things to the base class. @Input and @Output properties get inherited.



There is a solution for the host property you can use a @HostBinding instead and this will get inherited. For example your binding you can do like this:



@HostBinding('hidden') get hidden(): boolean { return col.deactivated; }





share|improve this answer





















  • I tried this, the problem with this is that the property col.deactivated changes over time and with the old solution the columns would react to it. With this solution they don't. Sadly I can't bind to [hidden]
    – NDDTConti
    Nov 15 at 9:22










  • Can you give more information about where the col.deactivated comes from? I have made a simple sample on StackBlitz and it works ok. I'm binding to a property of the same component.
    – AlesD
    Nov 15 at 19:58










  • Yeah but in your example it is only checked on startup. There is no change later. On my example the col-object is handed in as an @Input
    – NDDTConti
    19 hours ago










  • It changes if you press the Toggle button. Then you can see live that it updates the binding and the content is hidden or shown.
    – AlesD
    4 hours ago


















up vote
0
down vote













I also created a Stackblitz which solves them the only way I know how. Credit to AlesD for solving your first problem, all you needed to do to solve the issue is add @Input() onto visibility which you control in the parent element.



Your issue with a context menu is less straightforward. One option that I quickly tried to show in my stackblitz using ngx-contextmenu is done using nested components. There's a nice tutorial here



As you discovered, you have to choose between using extends, or using a nested component. In my example, I use both, but it may make the most sense to just use one or the other depending:




  • If your context menus are different and redundancy is not that big an issue, use extends, and build the context menu manually on each component

  • if the context menus are all going to be the same, I would drop the extends entirely and use a nested component. You can access the nested component using @ViewChild to gain access to the attributes you need.

  • Using both (like in my example) was used mostly for demonstrating as I don't understand the whole context of your application, but if you could abstract your cells to use a common interface or class you can pass in to the contextMenu, limiting the number of inputs, it may make sense for you.






share|improve this answer





















    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',
    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%2f53223686%2fangular6-i-want-my-inherited-component-to-have-some-propertys-of-the-parent%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    2
    down vote













    The @Component decorator metadata is not inherited so you cannot move some things to the base class. @Input and @Output properties get inherited.



    There is a solution for the host property you can use a @HostBinding instead and this will get inherited. For example your binding you can do like this:



    @HostBinding('hidden') get hidden(): boolean { return col.deactivated; }





    share|improve this answer





















    • I tried this, the problem with this is that the property col.deactivated changes over time and with the old solution the columns would react to it. With this solution they don't. Sadly I can't bind to [hidden]
      – NDDTConti
      Nov 15 at 9:22










    • Can you give more information about where the col.deactivated comes from? I have made a simple sample on StackBlitz and it works ok. I'm binding to a property of the same component.
      – AlesD
      Nov 15 at 19:58










    • Yeah but in your example it is only checked on startup. There is no change later. On my example the col-object is handed in as an @Input
      – NDDTConti
      19 hours ago










    • It changes if you press the Toggle button. Then you can see live that it updates the binding and the content is hidden or shown.
      – AlesD
      4 hours ago















    up vote
    2
    down vote













    The @Component decorator metadata is not inherited so you cannot move some things to the base class. @Input and @Output properties get inherited.



    There is a solution for the host property you can use a @HostBinding instead and this will get inherited. For example your binding you can do like this:



    @HostBinding('hidden') get hidden(): boolean { return col.deactivated; }





    share|improve this answer





















    • I tried this, the problem with this is that the property col.deactivated changes over time and with the old solution the columns would react to it. With this solution they don't. Sadly I can't bind to [hidden]
      – NDDTConti
      Nov 15 at 9:22










    • Can you give more information about where the col.deactivated comes from? I have made a simple sample on StackBlitz and it works ok. I'm binding to a property of the same component.
      – AlesD
      Nov 15 at 19:58










    • Yeah but in your example it is only checked on startup. There is no change later. On my example the col-object is handed in as an @Input
      – NDDTConti
      19 hours ago










    • It changes if you press the Toggle button. Then you can see live that it updates the binding and the content is hidden or shown.
      – AlesD
      4 hours ago













    up vote
    2
    down vote










    up vote
    2
    down vote









    The @Component decorator metadata is not inherited so you cannot move some things to the base class. @Input and @Output properties get inherited.



    There is a solution for the host property you can use a @HostBinding instead and this will get inherited. For example your binding you can do like this:



    @HostBinding('hidden') get hidden(): boolean { return col.deactivated; }





    share|improve this answer












    The @Component decorator metadata is not inherited so you cannot move some things to the base class. @Input and @Output properties get inherited.



    There is a solution for the host property you can use a @HostBinding instead and this will get inherited. For example your binding you can do like this:



    @HostBinding('hidden') get hidden(): boolean { return col.deactivated; }






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Nov 14 at 22:15









    AlesD

    1,87327




    1,87327












    • I tried this, the problem with this is that the property col.deactivated changes over time and with the old solution the columns would react to it. With this solution they don't. Sadly I can't bind to [hidden]
      – NDDTConti
      Nov 15 at 9:22










    • Can you give more information about where the col.deactivated comes from? I have made a simple sample on StackBlitz and it works ok. I'm binding to a property of the same component.
      – AlesD
      Nov 15 at 19:58










    • Yeah but in your example it is only checked on startup. There is no change later. On my example the col-object is handed in as an @Input
      – NDDTConti
      19 hours ago










    • It changes if you press the Toggle button. Then you can see live that it updates the binding and the content is hidden or shown.
      – AlesD
      4 hours ago


















    • I tried this, the problem with this is that the property col.deactivated changes over time and with the old solution the columns would react to it. With this solution they don't. Sadly I can't bind to [hidden]
      – NDDTConti
      Nov 15 at 9:22










    • Can you give more information about where the col.deactivated comes from? I have made a simple sample on StackBlitz and it works ok. I'm binding to a property of the same component.
      – AlesD
      Nov 15 at 19:58










    • Yeah but in your example it is only checked on startup. There is no change later. On my example the col-object is handed in as an @Input
      – NDDTConti
      19 hours ago










    • It changes if you press the Toggle button. Then you can see live that it updates the binding and the content is hidden or shown.
      – AlesD
      4 hours ago
















    I tried this, the problem with this is that the property col.deactivated changes over time and with the old solution the columns would react to it. With this solution they don't. Sadly I can't bind to [hidden]
    – NDDTConti
    Nov 15 at 9:22




    I tried this, the problem with this is that the property col.deactivated changes over time and with the old solution the columns would react to it. With this solution they don't. Sadly I can't bind to [hidden]
    – NDDTConti
    Nov 15 at 9:22












    Can you give more information about where the col.deactivated comes from? I have made a simple sample on StackBlitz and it works ok. I'm binding to a property of the same component.
    – AlesD
    Nov 15 at 19:58




    Can you give more information about where the col.deactivated comes from? I have made a simple sample on StackBlitz and it works ok. I'm binding to a property of the same component.
    – AlesD
    Nov 15 at 19:58












    Yeah but in your example it is only checked on startup. There is no change later. On my example the col-object is handed in as an @Input
    – NDDTConti
    19 hours ago




    Yeah but in your example it is only checked on startup. There is no change later. On my example the col-object is handed in as an @Input
    – NDDTConti
    19 hours ago












    It changes if you press the Toggle button. Then you can see live that it updates the binding and the content is hidden or shown.
    – AlesD
    4 hours ago




    It changes if you press the Toggle button. Then you can see live that it updates the binding and the content is hidden or shown.
    – AlesD
    4 hours ago












    up vote
    0
    down vote













    I also created a Stackblitz which solves them the only way I know how. Credit to AlesD for solving your first problem, all you needed to do to solve the issue is add @Input() onto visibility which you control in the parent element.



    Your issue with a context menu is less straightforward. One option that I quickly tried to show in my stackblitz using ngx-contextmenu is done using nested components. There's a nice tutorial here



    As you discovered, you have to choose between using extends, or using a nested component. In my example, I use both, but it may make the most sense to just use one or the other depending:




    • If your context menus are different and redundancy is not that big an issue, use extends, and build the context menu manually on each component

    • if the context menus are all going to be the same, I would drop the extends entirely and use a nested component. You can access the nested component using @ViewChild to gain access to the attributes you need.

    • Using both (like in my example) was used mostly for demonstrating as I don't understand the whole context of your application, but if you could abstract your cells to use a common interface or class you can pass in to the contextMenu, limiting the number of inputs, it may make sense for you.






    share|improve this answer

























      up vote
      0
      down vote













      I also created a Stackblitz which solves them the only way I know how. Credit to AlesD for solving your first problem, all you needed to do to solve the issue is add @Input() onto visibility which you control in the parent element.



      Your issue with a context menu is less straightforward. One option that I quickly tried to show in my stackblitz using ngx-contextmenu is done using nested components. There's a nice tutorial here



      As you discovered, you have to choose between using extends, or using a nested component. In my example, I use both, but it may make the most sense to just use one or the other depending:




      • If your context menus are different and redundancy is not that big an issue, use extends, and build the context menu manually on each component

      • if the context menus are all going to be the same, I would drop the extends entirely and use a nested component. You can access the nested component using @ViewChild to gain access to the attributes you need.

      • Using both (like in my example) was used mostly for demonstrating as I don't understand the whole context of your application, but if you could abstract your cells to use a common interface or class you can pass in to the contextMenu, limiting the number of inputs, it may make sense for you.






      share|improve this answer























        up vote
        0
        down vote










        up vote
        0
        down vote









        I also created a Stackblitz which solves them the only way I know how. Credit to AlesD for solving your first problem, all you needed to do to solve the issue is add @Input() onto visibility which you control in the parent element.



        Your issue with a context menu is less straightforward. One option that I quickly tried to show in my stackblitz using ngx-contextmenu is done using nested components. There's a nice tutorial here



        As you discovered, you have to choose between using extends, or using a nested component. In my example, I use both, but it may make the most sense to just use one or the other depending:




        • If your context menus are different and redundancy is not that big an issue, use extends, and build the context menu manually on each component

        • if the context menus are all going to be the same, I would drop the extends entirely and use a nested component. You can access the nested component using @ViewChild to gain access to the attributes you need.

        • Using both (like in my example) was used mostly for demonstrating as I don't understand the whole context of your application, but if you could abstract your cells to use a common interface or class you can pass in to the contextMenu, limiting the number of inputs, it may make sense for you.






        share|improve this answer












        I also created a Stackblitz which solves them the only way I know how. Credit to AlesD for solving your first problem, all you needed to do to solve the issue is add @Input() onto visibility which you control in the parent element.



        Your issue with a context menu is less straightforward. One option that I quickly tried to show in my stackblitz using ngx-contextmenu is done using nested components. There's a nice tutorial here



        As you discovered, you have to choose between using extends, or using a nested component. In my example, I use both, but it may make the most sense to just use one or the other depending:




        • If your context menus are different and redundancy is not that big an issue, use extends, and build the context menu manually on each component

        • if the context menus are all going to be the same, I would drop the extends entirely and use a nested component. You can access the nested component using @ViewChild to gain access to the attributes you need.

        • Using both (like in my example) was used mostly for demonstrating as I don't understand the whole context of your application, but if you could abstract your cells to use a common interface or class you can pass in to the contextMenu, limiting the number of inputs, it may make sense for you.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered 7 hours ago









        Murphy4

        475513




        475513






























             

            draft saved


            draft discarded



















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53223686%2fangular6-i-want-my-inherited-component-to-have-some-propertys-of-the-parent%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

            Berounka

            Sphinx de Gizeh

            Different font size/position of beamer's navigation symbols template's content depending on regular/plain...