Home / Questions / 286210
Accepted
Alberto Ortega
Asked: 2020-08-16 17:48:33 +0800 CST 2020-08-16 17:48:33 +0800 CST

Modify styles of a component in Ionic 5 and angular 7

  • 772

I've been reading up on the subject. As I understood angular I add a functionality that causes the styles of a component to be encapsulated. I didn't quite understand how this works. But I understood that to refer to the component styles there are two ways:

Yesterday I asked this but it was too late so I had no answers.

:host{
  ion-content {
    background: red;
  }
}

// O esta otra forma

page-name{
    ion-content{
       background: red;
    }
}

My problem is that it doesn't work directly for me. I always have to do the following.

:host{
  ion-content {
    --background: red;
  }
}

In this way if the styles are taken. But they do recur. So if I rewrite the styles of an ionic component, it applies to all children of this component.

enter image description here

This is the code I have. I hope you can help me.

HTML

<ion-content class="background">
  <ion-card-content>
    <img class="logo" src="assets/logo/579358.svg" alt="">
    <ion-card-header>
      <ion-card-title text-center>Reading the barcode</ion-card-title>
      <ion-card-subtitle text-center>welcome to the your new app</ion-card-subtitle>
    </ion-card-header>
    <form [formGroup]="loginForm">
      <ion-item>
        <ion-label position="floating">
          email
        </ion-label>
        <ion-input formControlName="email" type="text" name="email"></ion-input>
      </ion-item>
      <div class="error-messages">
        <ng-container *ngFor="let error of error_messages.email">
          <div class="error-message"
            *ngIf="loginForm.get('email').hasError(error.type) && (loginForm.get('email').dirty || loginForm.get('email').touched)">
            {{ error.message }}
          </div>
        </ng-container>

      </div>
      <ion-item>
        <ion-label position="floating">
          password
        </ion-label>
        <ion-input formControlName="password" type="password" name="password"></ion-input>
      </ion-item>
      <div class="error-messages">
        <ng-container *ngFor="let error of error_messages.password">
          <div class="error-message"
            *ngIf="loginForm.get('password').hasError(error.type) && (loginForm.get('password').dirty || loginForm.get('password').touched)">
            {{ error.message }}


          </div>
        </ng-container>

      </div>
      <br>
      <ion-button (click)="onLogin()" [disabled]="!loginForm.valid" expand="block" shape="round">
        <ion-icon slot="start" name="contact"></ion-icon>
        Login
      </ion-button>
    </form>
  </ion-card-content>
</ion-content>

SCSS

:host {
    ion-content {
        --background: url("./../../../../assets/App/7243-01-low-poly-background-16x9-1.jpg") !important;
        --ion-background-color: #006ff8 !important;
        background-position: center, center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }
}
angular7

1 Answers

  1. Best Answer

    With what happens with Angular View Encapsulation is that it helps you encapsulate the styles, that means that when you declare ViewEncapsulation in a component, it will not load the Angular or Material Bootstrap styles, remember that they are SPA and that usually if you move from component and have the same class name it may load the styles from the previous page.

    This will help you to be able to edit the styles of one component without affecting others.

    import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app-elemplo',
  templateUrl: 'ejemplo.html',
  styles: [],
  encapsulation: ViewEncapsulation.None
})
    • 1