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

Typescript having issues compiling to commonjs/es2015 accurately

Understand which form has been submitted

Animate the transition of the previous element moving downward while simultaneously introducing a new element at the top

Render multiple checkboxes with values from an array of objects passed as a prop to a child component using a v

Executing Enter Key and Button Simultaneously with JavaScript: Step-by-Step Guide

Tips for integrating the react-financial-charts library into your React and JavaScript project

Creating nested namespaces with interfaces in Typescript type definitions

JavaScript allows for selecting individual IDs by their corresponding numbers

Step-by-step guide to uploading files using cucumber-js

Inserting a large number of records in MySQL using a batch insertion method

I'm struggling to find the perfect configuration for Vite, JSconfig, and Aliases in Visual Studio Code to optimize Intellisense and Autocomplete features

ES6 destructuring in a loop

Unable to retrieve the value stored in the global variable

How can you check the boolean value of a checkbox using jQuery?

Turn off automatic zooming for mobile device input

The ng-click function seems to be malfunctioning within the Angular JS framework

Is it possible to return an array of middleware from one middleware to another in Express JS?

Guidance on establishing an Array data type for a field in GraphQL Type declarations

Could someone share an instance of an AngularJS configuration that continuously checks for new data and automatically refreshes the user interface once the data is obtained?

The use of the jQuery clone() method in conjunction with jQuery TABS allows for the display of cloned fields