Achieving dynamic text alignment within a Grid tile container using HTML and Angular

Question

Achieving dynamic text alignment within a Grid tile container using HTML and Angular

Here is the main section of my parent component.

<div class="o-tile-container  ">
                        <div *ngFor="let country of Countrys">
                            <app-country
                                [name]="name"
                                [count]="count"
                                [level]="'Country'"
                            ></app-country>
                        </div>
            </div>

This is the standard HTML code for my country child component:

<div [matRippleColor]="primary" class="m-tile" matRipple>
    <div class="a-tile-graph">
        <div class="titles">
            <div class="head" id="heading-name">{{name}}</div>
            <div class="sub">{{level}}</div>
        </div>
    </div>
    <div class="content-tile">
        <div class="o-tile-content">
            <div class="a-tile-title">{{name}}</div>
            <div class="a-tile-count">{{count}}</div>
        </div>
    </div>
</div>

A simple representation of how this works.

https://i.sstatic.net/7w8PB.png

In this setup, I aim to show the heading name at the same level within each tile and display the country level consistently across containers. How can I achieve this?

html css angular typescript

Answer 1

Answer №1

In order to dynamically align text, you can pass your style as an @Input. Below is a sample code that demonstrates how to achieve this. Feel free to check out the code and demo on StackBlitz by following this Demo LINK StackBlitz =>
** Parent HTML:**

<div class="o-tile-container  ">
                        <div *ngFor="let country of Countrys">
                            <app-country
                                [name]="country.name"
                                [count]="country.count"
                                [level]="country.level"
                                [mystyle]="country.style"
                            ></app-country>
                        </div>
</div>

Child HTML:

 <div style="border-style: solid;width:100px" [matRippleColor]="primary" class="m-tile" matRipple [ngStyle]="this.mystyle">
        <div class="a-tile-graph" >
            <div class="titles">
                <div class="head" id="heading-name"  >{{name}} </div>
                <div class="sub">{{level}}</div>
            </div>
        </div>
        <div class="content-tile">
            <div class="o-tile-content">
                <div class="a-tile-title">{{name}}</div>
                <div class="a-tile-count">{{count}}</div>
            </div>
        </div>
    </div>

TS:
Parent TS:

export class AppComponent  {
 Countrys:any=[];
  rippleColor: string = "white";
  constructor(){
    let c1=new Country();
    c1.count=1;
    c1.level='L1';
    c1.name='A';
    c1.style={'text-align':'center'}
    this.Countrys.push(c1);
    let c2=new Country();
    c2.count=2;
    c2.level='L2';
    c2.name='B';
    c2.style={'text-align':'right'};
    this.Countrys.push(c2);
    let c3=new Country();
    c3.count=3;
    c3.level='L3';
    c3.name='C';
    c3.style={'text-align':'left'};
    this.Countrys.push(c3);
  }
}
class Country{
name;string;
count:number;
level:string;
style:any;
}

Child TS:

export class CountryComponent implements OnInit {
  @Input() level:string;
  @Input() name:string;
  @Input() count:number;
  @Input() mystyle:any;
  constructor() {
   }

  ngOnInit() {
  }
}

Answer 2

In order to dynamically align text, you can pass your style as an @Input. Below is a sample code that demonstrates how to achieve this. Feel free to check out the code and demo on StackBlitz by following this Demo LINK StackBlitz =>
** Parent HTML:**

<div class="o-tile-container  ">
                        <div *ngFor="let country of Countrys">
                            <app-country
                                [name]="country.name"
                                [count]="country.count"
                                [level]="country.level"
                                [mystyle]="country.style"
                            ></app-country>
                        </div>
</div>

Child HTML:

 <div style="border-style: solid;width:100px" [matRippleColor]="primary" class="m-tile" matRipple [ngStyle]="this.mystyle">
        <div class="a-tile-graph" >
            <div class="titles">
                <div class="head" id="heading-name"  >{{name}} </div>
                <div class="sub">{{level}}</div>
            </div>
        </div>
        <div class="content-tile">
            <div class="o-tile-content">
                <div class="a-tile-title">{{name}}</div>
                <div class="a-tile-count">{{count}}</div>
            </div>
        </div>
    </div>

TS:
Parent TS:

export class AppComponent  {
 Countrys:any=[];
  rippleColor: string = "white";
  constructor(){
    let c1=new Country();
    c1.count=1;
    c1.level='L1';
    c1.name='A';
    c1.style={'text-align':'center'}
    this.Countrys.push(c1);
    let c2=new Country();
    c2.count=2;
    c2.level='L2';
    c2.name='B';
    c2.style={'text-align':'right'};
    this.Countrys.push(c2);
    let c3=new Country();
    c3.count=3;
    c3.level='L3';
    c3.name='C';
    c3.style={'text-align':'left'};
    this.Countrys.push(c3);
  }
}
class Country{
name;string;
count:number;
level:string;
style:any;
}

Child TS:

export class CountryComponent implements OnInit {
  @Input() level:string;
  @Input() name:string;
  @Input() count:number;
  @Input() mystyle:any;
  constructor() {
   }

  ngOnInit() {
  }
}

Achieving dynamic text alignment within a Grid tile container using HTML and Angular

Answer №1

Similar questions

Constantly receiving an undefined value when trying to access a variable in an ngrx Observable

The data in Angular2 service is not being saved consistently

Entering numbers using <input type="number"> does not restrict invalid inputs, while accessing "element.value" does not give me the ability to make corrections

What are the steps for adding information to a MySQL database with GWT, HTML, and either JDBC or Hibernate?

Find out if a dynamically imported component has finished loading in Nextjs

Exploring the use of ASP:Label, <span>, and accessing elements by their ID

Scrolling and adjusting window size while perfectly displaying images pixel by pixel using php and javascript

The parameter necessary for [Route: admin.request.update] is missing. The required URI is admin/request/{request}, and the missing parameter is 'request'

Adjust the color of the input range slider using javascript

What is the reason for not being able to align breadcrumb text to the right

Collecting information from form submissions, accessing data from the database, and displaying the results

jQuery SlideUp and SlideDown causing Margin Bug in Internet Explorer 7

"Converting to Typescript resulted in the absence of a default export in the module

Ways to position a single item in the middle of a multi-column layout

What is the best way to display a div in Chrome without allowing any user interactions?

What is the method for obtaining the width of a g element?

Initial binding of Angular2 ControlGroup valueChanges event

Is it possible to load a webpage in a WebBrowser control without displaying certain HTML elements by their IDs

Is there a way to modify the default lite-server port in the Angular quickstart setup?

How can I make two lines equal in length by stretching them?