Html Question posted in
Some basic documentation can be found here.

Html – Define a div's style in the angular template at startup

I have this div

<div class="relative rounded overflow-clip border w-full" [style.aspect-ratio]="media.value.ratio">
            <img fill priority [ngSrc]="media.value.src || ftaLogo" [alt]="media.value.caption"
                 [style.object-fit]="media.value.fit" (click)="insertMedia()">
          </div>

at startup, I try to assign the aspect ratio based on a model but it does not apply, what’s the problem?

the aspect ratio of my model is 16:9, even by examining in the browser, my style has never been applied.

But when I change the aspect ratio while the application is running (by clicking on a button) it works.

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Sorry everyone. Thanks you for trying to help me.

    I founded what was wrong. Data in my local database did not contain the ratio field, that's why ratio doesn't work first time my apologies. 😁😁😁😁

    Will delete this Question


  2. 0

    Could you try, aspectRatio instead of aspect-ratio

    <div class="relative rounded overflow-clip border w-full" [style.aspectRatio]="media.value.ratio">
        <img fill priority [ngSrc]="media.value.src || ftaLogo" [alt]="media.value.caption"
             [style.objectFit]="media.value.fit" (click)="insertMedia()">
      </div>

    You can also try [ngStyle]

    <div class="relative rounded overflow-clip border w-full" [ngStyle]="{'aspect-ratio': media.value.ratio + ' !important' }">
        <img fill priority [ngSrc]="media.value.src || ftaLogo" [alt]="media.value.caption"
             [style.objectFit]="media.value.fit" (click)="insertMedia()">
      </div>
    Login or Signup to reply.
  3. 0

    It sounds like the issue you are experiencing might be related to the timing of when the model data is available for the initial rendering of the template.

    When the Angular component is initially rendered, the media.value.ratio might not be available yet, causing the [style.aspect-ratio] binding to be ineffective. However, once the data is available and updated during runtime (e.g., when you click a button to change the aspect ratio), the binding works as expected.

    To ensure that the aspect ratio is set correctly at startup, you can try a couple of approaches:

    1. ngOnInit Initialization: You can set the aspect ratio in the ngOnInit lifecycle hook of your component. This ensures that the media.value.ratio is available when the component is initialized.

    TypeScript:

    ngOnInit() {
    this.media.value.ratio = '16:9'; // Or set it based on your model data
}
    1. ngIf Directive: You can use an ngIf directive in the template to conditionally render the div only when media.value.ratio is available.

    HTML:

     <div *ngIf="media.value.ratio" class="relative rounded overflow-clip border w-full" [style.aspect-ratio]="media.value.ratio">
        <img fill priority [ngSrc]="media.value.src || ftaLogo" [alt]="media.value.caption"
            [style.object-fit]="media.value.fit" (click)="insertMedia()">
    </div>

    By using one of these methods, you can ensure that the aspect ratio is set correctly at startup and avoid issues with the initial rendering of the template.

    Login or Signup to reply.
  4. 0

    In the second approach you provided, you can set the ratio directly in the template without using ngOnInit by initializing the media.value.ratio in your component. Here’s an example of how you can achieve this:

    In your component:

**Typescript**

    export class YourComponent {
      media = {
        value: {
          ratio: '16:9', // Initialize ratio here
          src: 'your-image-src',
          fit: 'cover',
          caption: 'Your image caption'
        }
      };
    
      ftaLogo = 'path-to-fta-logo';
      
      insertMedia() {
        // Your insertMedia logic here
      }
    }

And in your template:

**HTML**

    <div *ngIf="media.value.ratio" class="relative rounded overflow-clip border w-full" [style.aspect-ratio]="media.value.ratio">
        <img fill priority [ngSrc]="media.value.src || ftaLogo" [alt]="media.value.caption"
            [style.object-fit]="media.value.fit" (click)="insertMedia()">
    </div>

    By initializing the media.value.ratio in your component, you can directly use it in your template without the need for ngOnInit. Make sure to adjust the paths and values according to your specific requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search