CODEWITHSUNDEEP
htmlangulartypescript
Vejdis
Vejdis

Reputation: 13

Angular - Send different components in a loader depending on which components uses the loader

I have a problem in how to approach a task. I have a grid consisting of 4 squares. This grid, lets call it gridComponent, can be placed in several other components and will be used as a navigation tool in an application. My problem comes from how to populate the information. I have 6 different data informations, these can be the weather, news, twitterfeed etc. Content is not important. See the image. In any instance that this component is loaded 4 colors should be loaded with corresponding number. On homepage I want colors 1,2,3,4 to be displayed, but on the settingspage I might want 5,6,3,4 to be displayed, how can I achieve that and still use a single component?

enter image description here

How the grid is currently set up

<div class="container col-md-6">
  <div class="row">
    <div class="card-group">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">{{ title }}</h5>
          {{ content1 }}
        </div>
      </div>
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">{{ title2 }}</h5>
          {{ content2 }}
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="card-group">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">{{ title3 }}</h5>
          {{ content3 }}
        </div>
      </div>
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">{{ title4 }}</h5>
          {{ content4 }}
        </div>
      </div>
    </div>
  </div>
</div>

As such when I use this component I want to send it 4 more components from where it gathers title and content.

I don't come from a front end background and I see this as a function of sort where I want to pass the 4 components in a constructor but that does not seem to be working. So any nudge in the correct direction is greatly appreciated

Upvotes: 0

Views: 32

Answers (1)

Nicolas
Nicolas

Reputation: 155

I think that you are looking for Input decorator:

  • inside your child component (gridComponent) you have to declare a variable with input decorator, in this case i would use a number/string array that can provide the condition to show/hide your information
  • inside your parent components you can define which information you want to show like: <gridComponent infoToBeShown=[5,6,3,4]>

For more documentation: https://angular.io/guide/inputs-outputs

Upvotes: 1

Related Questions