CODEWITHSUNDEEP
angular
Dmitry Samoylov
Dmitry Samoylov

Reputation: 1328

Could I have several parts for angular component template?

I want to use my component at several pages, including modal window. Let's say it's called CompanyInfoComponent. It has company title information and the area with detailed info.

I use Angular with Bootstrap 4, and I want to use different component parts in different places on the page. I want first part to contain compony name and some control elements and second part to contain all the company details, so that I could use it differently on 'simple' pages and modal component.

Generally I want it to be used like:

<div class="container">
    <div class="card">
        <div class="card-block"> 
            <div class="row">
                <div class="col-12">
                    <h4 class="card-title"> 
                        <app-company-info-part-1></app-company-info-part-1>
                    </h4>
                </div>
            </div>
            <app-company-info-part-2></app-company-info-part-2>
        </div> <!--card-block-->
    </div> <!--card-->
</div><!-- container -->

And in modal window I want to use it like

<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">
                <app-company-info-part-1></app-company-info-part-1>
            </h4>
        </div>
        <div class="modal-body">
            <div class="container">
                <app-company-info-part-2></app-company-info-part-2>  
            </div>
        </div>
    </div> <!--modal-content-->
</div> <!-- modal-dialog>

I want it to be single component so that I could have single component class with all necessary methods, because in terms of the code part 1 and part 2 are going to be tightly coupled.

I know that it's impossible to make angular behave like I want to, but I think that use case is quite common and there should be some workaround. I'd be happy if anyone could share ideas. Thanks!

Upvotes: 0

Views: 28

Answers (1)

DeborahK
DeborahK

Reputation: 60596

I would recommend this being in two components, not one. The logic could then be in a service shared by both components.

But if you have to have these both in the same component, you could use *ngIf to include one or the other as needed.

Here is an example:

<div class="container" *ngIf=!turnOnModal>
    <div class="card">
        <div class="card-block"> 
            <div class="row">
                <div class="col-12">
                    <h4 class="card-title"> 
                        <app-company-info-part-1></app-company-info-part-1>
                    </h4>
                </div>
            </div>
            <app-company-info-part-2></app-company-info-part-2>
        </div> <!--card-block-->
    </div> <!--card-->
</div><!-- container -->
<div class="modal-dialog modal-lg" role="document" *ngIf="turnOnModal">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">
                <app-company-info-part-1></app-company-info-part-1>
            </h4>
        </div>
        <div class="modal-body">
            <div class="container">
                <app-company-info-part-2></app-company-info-part-2>  
            </div>
        </div>
    </div> <!--modal-content-->
</div> <!-- modal-dialog>

Upvotes: 1

Related Questions