Encasing the Angular 2 component template in a <div> tag

Question

Encasing the Angular 2 component template in a <div> tag

Currently, I have a parent component managing multiple child components. My goal is to enclose each child component's template with a *ngIf directive for conditional rendering. The number of children in the parent component can vary.

Here is an example of the current view structure:

<parent>
    <child1></child1>
    <child2></child2>
</parent>

<ng-content></ng-content>

The content inside ng-content represents the template of the child components. While this setup functions as intended, I need the ability to dynamically control which child components are displayed based on certain conditions. For instance, hiding the template of child1 when child2 is selected. I have considered using *ngIf to wrap each child component's template but haven't found a suitable way to implement this logic yet.

javascript angularjs

Answer 1

Answer №1

Perhaps this information can be of assistance to you.

    import { Component, ContentChildren, QueryList, AfterContentInit } from 'angular2/core';
    import { TabComponent } from './tab.component';

    @Component({
       selector: 'tabs',
       template:`
        <ul class="tab-container">
          <li class="tab" *ngFor="#tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active">
            <span>{{tab.tabTitle}}</span>
          </li>
        </ul>
        <div class="tab-content">
            <ng-content></ng-content>
        </div>

      `
    })
    export class TabsComponent implements AfterContentInit {

       @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;

       ngAfterContentInit() {
          let activeTabs = this.tabs.filter((tab) => tab.active);

          if (activeTabs.length === 0) {
             this.selectTab(this.tabs.first);
          }
       }

       selectTab(selectedTab: TabComponent) {
          this.tabs.toArray().forEach(tab => tab.active = false);

          selectedTab.active = true;
       }

    }

import { Component, Input } from 'angular2/core';

@Component({
   selector: 'tab',
   template: `
    <div [hidden]="!active" class="pane">
      <ng-content></ng-content>
    </div>
  `
})
export class TabComponent {
   @Input() tabTitle: string;
   @Input() active = false;
}

Answer 2

Perhaps this information can be of assistance to you.

    import { Component, ContentChildren, QueryList, AfterContentInit } from 'angular2/core';
    import { TabComponent } from './tab.component';

    @Component({
       selector: 'tabs',
       template:`
        <ul class="tab-container">
          <li class="tab" *ngFor="#tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active">
            <span>{{tab.tabTitle}}</span>
          </li>
        </ul>
        <div class="tab-content">
            <ng-content></ng-content>
        </div>

      `
    })
    export class TabsComponent implements AfterContentInit {

       @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;

       ngAfterContentInit() {
          let activeTabs = this.tabs.filter((tab) => tab.active);

          if (activeTabs.length === 0) {
             this.selectTab(this.tabs.first);
          }
       }

       selectTab(selectedTab: TabComponent) {
          this.tabs.toArray().forEach(tab => tab.active = false);

          selectedTab.active = true;
       }

    }

import { Component, Input } from 'angular2/core';

@Component({
   selector: 'tab',
   template: `
    <div [hidden]="!active" class="pane">
      <ng-content></ng-content>
    </div>
  `
})
export class TabComponent {
   @Input() tabTitle: string;
   @Input() active = false;
}

Encasing the Angular 2 component template in a <div> tag

Answer №1

Similar questions

Tips for acquiring the newest router in an angular environment

Enlarging an image on canvas and creating a repeating pattern

Guide on adjusting the CSS styling of elements in real-time from the backend using a user customization panel to modify the appearance of various web pages

Is there a way to customize the appearance of an unordered list by setting it to display as an image instead of default bullets? I want to

What is the best approach for accessing values from dynamic or multiple form fields upon submission in React?

Steps for redirecting from a URL containing location.hash to a different page

Interactive hover effect in JavaScript displays a larger version of other thumbnails when hovering over a dynamically loaded thumbnail image, instead of its own full-size image

What are the different ways in which :style is utilized in re-frame - with brackets, curly brackets, or simply without any characters?

Safari on iOS 11.4 ignoring the 'touch-action: manipulation' property

Obtain information from local server in a React Native application

How can I update the title of the NavigationBarRouteMapper without altering the current route in React Native?

Modify the directive when the scope variable undergoes changes

Importing D3 data from CSV files using the "%" symbol

Online Database for Hybrid Mobile Applications

Iframes are not compatible with JQuery UI dialogs

Using AJAX (jQuery) to process and refine JSON data through filtration

How can I make AWS SDK wait for an asynchronous call to finish executing?

Is it possible to display this code through printing rather than using an onclick event?

Can a shape similar to an inverted circle be created using CSS and jQuery?

Include an item in a Vuetify model's array of objects