Questions[angular7]

In my application I have multiple components and one is Products and that is in the app.module and my product.module.ts (StartProductsComponent if it shows it) I have the following lines:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DesarrolloTecnologicoInnovacionComponent } from './DesarrolloTecnologicoInnovacion/desarrollo-tecnologico-innovacion.component';
import { InicioProductosComponent } from './inicio-productos/inicio-productos.component';

const routes: Routes = [
  {
    path: 'inicio-productos',
    component: InicioProductosComponent
  }
  ,
    {
    path: 'DesarrolloTecnologicoInnovacion',
    component: DesarrolloTecnologicoInnovacionComponent
  }
];

@NgModule({
  declarations: [

  ],
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProductosRoutingModule { }

In the DesarrolloTecnologicoInnovacion module, it was generated in this way:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DesarrolloTecnologicoInnovacionModule } from './desarrollo-tecnologico-innovacion.module';

const routes: Routes = [
  {
    path: 'DesarrolloTecnologicoInnovacion',
    component: DesarrolloTecnologicoInnovacionModule
  },
  { path: '**', redirectTo: '/productos', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DesarrolloTecnologicoInnovacionRoutingModule { }

but when navigating and putting the route in the browser:

http://localhost:4200/DevelopmentTechnologyInnovation

It doesn't show me the component that is located in this folder.. TechnologicalInnovationDevelopment

My knowledge in angular is little, so I don't know if I'm doing something wrong.

I am with a project in Angular 7. I have several forms and in the fields that are only digits and/or amounts I use this onlyDigits directive ( https://github.com/changhuixu/ngx-digit-only ) and it works very well. As the documentation says when I have an .html that belongs to a module, I use it this way:

In the .module.ts I declare this way:

import { DigitOnlyModule } from '@uiowa/digit-only';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    DigitOnlyModule
  ],
  ...
})

And in the html form that I need to use it, I do it this way:

<input type="text" digitOnly />

Nothing special and just as the documentation says. The PROBLEM is that I have a couple of forms (modals) that are generic and are not defined as modules so digitOnly doesn't work (it doesn't throw an error or anything... it just doesn't work). This is an example of one of them and where I use digitOnly but it doesn't work for me:

<form class="form" role="form" [formGroup]="form">
<fieldset>
    <div class="modal-header">
        <span>{{ modalHeader }}</span>
    </div>

    <div class="modal-body">
        <div class=" form-group row">
            <label class="col-sm-3 col-form-label">Nim a portar</label>
            <div class="col-sm-8">
                <div class="form-group row">
                    <div class="col-sm-4">
                        <input type="text" digitOnly maxlength="4" class="form-control" placeholder="Prefijo (sin 0)" [formControl]="form.controls['pref']" [ngClass]="{'form-control-danger': form.controls['pref'].hasError('required') && form.controls['pref'].touched}">
                    </div>
                    <div class="col-sm-8">
                        <input type="text" digitOnly maxlength="10" class="form-control" placeholder="Número (sin 15)" [formControl]="form.controls['nim']" [ngClass]="{'form-control-danger': form.controls['nim'].hasError('required') && form.controls['nim'].touched}">
                    </div>
                </div>
                <div style="color:red" class="m-1 form-control-feedback" *ngIf="form.controls['pref'].hasError('required') && form.controls['pref'].touched">¡El código de área del Nim a portar es requerido!</div>
                <div style="color:red" class="m-1 form-control-feedback" *ngIf="form.controls['pref'].hasError('minlength') && form.controls['pref'].touched">¡El código de área del Nim a portar debe contener al menos 2 dígitos!</div>
                <div style="color:red" class="m-1 form-control-feedback" *ngIf="form.controls['pref'].hasError('pattern') && form.controls['pref'].touched">¡El código de área del Nim a portar no tiene el formato correcto!</div>
                <div style="color:red" class="m-1 form-control-feedback" *ngIf="form.controls['nim'].hasError('required') && form.controls['nim'].touched">¡El número del Nim a portar es requerido!</div>
                <div style="color:red" class="m-1 form-control-feedback" *ngIf="form.controls['nim'].hasError('pattern') && form.controls['nim'].touched">¡El número del Nim a portar no tiene el formato correcto!</div>
                <div style="color:red" class="m-1 form-control-feedback" *ngIf="form.hasError('phoneLength')">¡El número del Nim a portar (Cód área + número) no tiene la longitud correcta!</div>
            </div>
            <button class="col-sm-1 btn btn-edit-claro btn-copy" (click)="copyText(formNim.value.area + formNim.value.num)"><i class="far fa-copy" aria-hidden="true"></i></button>
        </div>
        <div class=" form-group row">
            <label class="col-sm-3 col-form-label">Empresa orig.</label>
            <div class="col-sm-9">
                <select class="form-control" [formControl]="form.controls['operator']">
                    <option [value]="null" hidden>Seleccione la empresa de origen </option>
                    <option [value]="i.id" *ngFor="let i of modalOperators">{{i.name}}</option>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label for="market" class="col-sm-3 col-form-label">Mercado orig.</label>
            <div class="col-sm-9">
                <select class="form-control" [formControl]="form.controls['market']">
                    <option [value]="null" hidden>Seleccione el mercado origen</option>
                    <option [value]="i.id" *ngFor="let i of modalMarkets">{{i.name}}</option>
                </select>
            </div>
        </div>
        <div class="form-group row with-space left-panel-form">
            <div class="col-sm-12 title-form">
                <span>Gestión plan nuevo</span>
            </div>
            <div class="col-sm-12">
                <hr>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">Mercado dest.</label>
            <div class="col-sm-9">
                <select class="form-control" [formControl]="form.controls['markettarget']"
                    (change)="changeMarketTarget($event.target.value)">
                    <option [value]="null" hidden>Seleccione el mercado destino </option>
                    <option [value]="i.id" *ngFor="let i of modalMarkets">{{i.name}}
                    </option>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label for="payment" class="col-sm-3 col-form-label">Abono elegido</label>
            <div class="col-sm-9">
                <select class="form-control" [formControl]="form.controls['payment']">
                    <option [value]="null" hidden>Seleccione el abono del plan </option>
                    <option [value]="i.id" *ngFor="let i of payments">{{i.description}}
                    </option>
                </select>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-md btn-outline-claro" (click)="closeModal()">Cerrar</button>
        <button type="button" [disabled]="!form.valid" class="btn btn-claro" (click)="onSaveContinue()">Agregar y
            Limpiar</button>
        <button type="button" [disabled]="!form.valid" class="btn btn-claro" (click)="onSaveClose()">Agregar y
            Cerrar</button>
    </div>
</fieldset>

and the .component.ts of said form:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

import { ErrorMessageService } from '../error-message/error-message.service';
import { AditionalNimVo } from '../../services/vos/AditionalNimVo';
import { WSRESTCatalog } from '../../services/catalog.service';

@Component({
selector: 'ngx-aditionalnim',
templateUrl: './aditional-nim.component.html',
styleUrls: ['../../app.component.scss'],
})
    export class AditionalNimComponent implements OnInit {
    @Output() passEntry: EventEmitter<any> = new EventEmitter();

form: FormGroup;
modalHeader: string;
modalOperation: number;
modalObject: any;
modalOperators;
modalMarkets;
payments;

constructor(private activeModal: NgbActiveModal,
            private fb: FormBuilder,
            private catalogService: WSRESTCatalog,
            private errorService: ErrorMessageService,
    ) { }

ngOnInit() {
    this.form = this.fb.group({
        pref: new FormControl(null, Validators.compose([Validators.required, Validators.minLength(2),
            Validators.pattern('^[1-9][0-9]*$')])),
        nim: new FormControl(null, Validators.compose([Validators.required, Validators.pattern('^[1-9][0-9]*$')])),
        operator: new FormControl(null, Validators.compose([Validators.required])),
        market: new FormControl(null, Validators.compose([Validators.required])),
        markettarget: new FormControl(null, Validators.compose([Validators.required])),
        payment: new FormControl(null, Validators.compose([Validators.required])),
    }, { validator: this.checkLenghtTogether });
}

checkLenghtTogether(group: FormGroup): any {

    if (group) {
        const area = group.get('pref').value;
        const num = group.get('nim').value;
        if (area && num && (area.length + num.length) !== 10)
        return {phoneLength: true};
    }

    return null;
}

closeModal(): void {
    this.activeModal.dismiss();
}

changeMarketTarget(value) {
    if (value) {
        this.catalogService.getAllActivePayments(value).subscribe(
            data => {
                this.payments = data['body'];
            },
            error => {
                this.errorService.showError('Aviso Importante',
                    error['error']['description']);
            },
        );
    }
}

onSaveContinue() {
    const aditional = this.fillAditional(
        this.form.value.pref,
        this.form.value.nim,
        this.form.value.operator,
        this.form.value.market,
        this.form.value.markettarget,
        this.form.value.payment);

    this.passEntry.emit(aditional);

    this.form.reset();
}

onSaveClose() {
    const aditional = this.fillAditional(
        this.form.value.pref,
        this.form.value.nim,
        this.form.value.operator,
        this.form.value.market,
        this.form.value.markettarget,
        this.form.value.payment);

    this.passEntry.emit(aditional);

    this.activeModal.dismiss();
}

private fillAditional(nim: string, phone: string,
            operatorid: number, marketid: number, markettargetid: number,
            paymentid: number): AditionalNimVo {
    const aditional = new AditionalNimVo();
    aditional.phone = phone;
    aditional.pref = nim;
    aditional.operatorid = operatorid;
    aditional.operator = this.modalOperators.find(x => Number(x.id) === Number(operatorid))['name'];
    aditional.marketid = marketid;
    aditional.market = this.modalMarkets.find(x => Number(x.id) === Number(marketid))['name'];
    aditional.markettargetid = markettargetid;
    aditional.markettarget = this.modalMarkets.find(x => Number(x.id) === Number(markettargetid))['name'];
    aditional.paymentid = paymentid;
    const pay = this.payments.find(x => Number(x.id) === Number(paymentid));
    aditional.payment = pay['description'];

    return aditional;
}

}

As I mentioned before, digitOnly doesn't work for me here because I don't have a .module.ts to declare it. I tried declaring it in the app.module.ts but it didn't work either. Someone who can guide me how to use it or who has experienced the same thing with some other directive in this type of form??? Thank you at least for reading it.

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.

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;
    }
}

I have a button that saves correctly but I need a button that cancels what all the save does or clean the form this is the save code it would be to create a cancel() and call it on the button how could I achieve this taking into account the save button or just do it from the angular cheese client

guardar() {
    let crearRolRequest = new CrearRolRequest();
    crearRolRequest.nombre = this.form.controls["Nombre"].value;
    crearRolRequest.funcionalidadesIds = this.funcionalidadesSeleccionadas;
    this.dataService.actionUrl = this.configuration.ServerWithApiUrl + 'roles/obtenerxnombre';
    this.dataService .add<any>(crearRolRequest)
        .subscribe(resp => {
           this.showSuccess();
        }, error => {
           this.showError() ;
            return;
        });
  }

View

<p-toast [style]="{marginTop: '80px'}"></p-toast>
<p-panel [transitionOptions]="'0ms'" header="Registro de roles" [toggleable]="true">
    <div class="ui-fluid">
        <form [formGroup]="form" class="ui-g">
            <div class="ui-g-12 ui-md-6">
                <div class="ui-g-12">
                    <span class="ui-float-label">
                        <input id="float-input" type="text" size="30" pInputText  formControlName="Nombre" >
                     </span>
                    <p class="form-control-feedback" *ngIf="!form.controls['Nombre'].valid&&form.controls['Nombre'].dirty">El nombre es requerido
                    </p>
                </div>
            </div>
            <div class="ui-g-12">
                <div class="ui-g-12">
                    <p-tabView>
                        <p-tabPanel header="{{item.Nombre }}" [selected]="i == 0" *ngFor="let item of modulosFuncionalidades.registros; let i = index;">
                            <div *ngFor="let funcionalidad of item.Funcionalidades">
                                <p-checkbox name="groupname" value="{{funcionalidad.Nombre}}" (click)="addFuncionalidad(funcionalidad.FuncionalidadId)"></p-checkbox>
                                {{funcionalidad.Nombre}}
                            </div>
                        </p-tabPanel>
                    </p-tabView>
                </div>
            </div>
        </form>
    </div>
    <p-footer>
        <button [disabled]=" !form.valid " pButton type="button" icon="pi pi-save " label="Guardar " (click)="guardar() " class="ui-button-success "></button>
        <button [disabled]=" !form.valid " pButton type="button" icon="pi pi-times " label="Cancelar " (click)="guardar() " class="ui-button-danger "></button>

    </p-footer>
</p-panel>

my problem is the following, I have a product variable that saves a json which I can display in the html without any problem, but what I want is to add the price to the total and I get undefined

import { Component, OnInit } from '@angular/core';
import { ProductoService } from '../../services/producto.service'

@Component({
  selector: 'app-caja',
  templateUrl: './caja.component.html',
  styleUrls: ['./caja.component.css']
})
export class CajaComponent implements OnInit {
  public total:number=0;
  public producto:any;
  public idProducto:number;
  constructor(protected productoServices: ProductoService) { }
  ngOnInit() {
  }
  lanzar(id:number){
this.buscarProducto(id);
this.total += this.producto.precio;
  }
  buscarProducto(id:number){
this.productoServices.getProducto(id).subscribe(data=>(this.producto = data));
  }
}

ERROR TypeError: "this.product is undefined"