How can i make ngxLoading a reusable component?

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• How to get only one question to the preview page in survey management website in angular?

  I am using querystring to h=get the questions on preview page but I am not able to get one question on 1st page and 2nd on another page after clicking next button.

  Querystring

  const queryString = {
        SurveyId: 1,
        PageNo: 0,
        PageSize: 20
      };
  
• @Host() or ng-container incompatibility between angular 9 and 10

  Here are two live examples on stackblitz:

  • angular 9
  • angular 10

  To check the difference between them, open console and notice that:

  In form-error-control-name.directive.ts line 22:

  For angular 9, this.parent.control is not null For angular 10, this.parent.control will throw error

  What is the difference? I checked angular 10 update doc but don't know which incompatibility this is.

  Thanks!
• How can I delete a row by its SKU instead of its ID?

  I try to delete the row using the sku of the product. I'm using spring boot and angular. I got an error when I added the sku on my button like this one (click)="onDeleteProductBySku(deleteClick?.sku)" it said that the Property 'sku' does not exist on type '(product: Product) => void'.. On my command prompt, I got this error. How can I solve this problem?

  Error: product/product.component.html:50:109 - error TS2339: Property 'sku' does not exist on type '(product: Product) => void'.
  
  50 <button class="btn btn-outline-danger btn-sm me-2" (click)="onDeleteProductBySku(deleteClick?.sku)">Delete</button>
                                                                                                                                    
  product/product.component.ts:12:16
      12   templateUrl: './product.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~
  Error occurs in the template of component ProductComponent.
  

  ProductsController.java --> This is working on the postman.

  //Delete a product record using sku
  //http://localhost:8080/products/deletebysku?sku=12345678
  
  @DeleteMapping("/products/deletebysku")
  @ResponseBody
  private void deleteProductBySku(@RequestParam String sku){
      productsService.deleteProductBySku(sku);
  }
  

  product.component.ts

   public deleteProduct!: Product;
  
   public onDeleteProductBySku(sku: string): void {
      this.productServive.deleteProductBySku(sku).subscribe(
        (response: void) => {
          this.messageShow();
          console.log(response);
          this.getAllProduct();
        },
        (error: HttpErrorResponse) => {
          this.errorMessage(error.message);
        }
      );
   }
  
   public deleteClick(product: Product) {
     this.deleteProduct = product;
     console.log("delete by sku");
   }
  

  product.service.ts

  public deleteProductBySku(sku: string): Observable<void> {
    return this.http.delete<void>(`${this.apiServerUrl}/products/deletebysku?sku=${sku}`);
  }
  

  product.component.html

  <button class="btn btn-outline-danger btn-sm me-2" (click)="onDeleteProductBySku(deleteClick?.sku)">Delete</button>
  
• ngx-loading - Problem with this.loading = false

  I am using ngx-loading in my HTML, this.loading = true works fine with sendMail() function but for some reason, after the success message the loader doesn't disappear as if it doesn't recognize this.loading = false. Any help would be appreciated as I don't understand what is wrong here.

  <div class="card-reinfort"> <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '3px' }"></ngx-loading></div>
  

  And component:

  @Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'ma-reinforcement',
  templateUrl: './reinforcement.component.html'
  })
  export class ReinforcementComponent {
  loading = false;
  reinforcementList$: Observable<Array>;
  @ViewChild(ReinforcementTableComponent, { static: false }) table: 
  ReinforcementTableComponent;
  
  constructor(private readonly reinforcementService: ReinforcementService, private readonly 
  toastrService: ToastrService) {
  this.reinforcementList$ = this.reinforcementService.getAll();
  }
  
  onSaveEvent(reinforcementItem: ReinforcementItem): void {
  this.reinforcementList$ = this.reinforcementService.save(reinforcementItem);
  }
  
  sendMail(): void {
  this.loading = true;
  this.reinforcementService.sendMail('Export du renfort sur la ligne de caisse', 'Message')
      .subscribe(result => {
          this.loading = false;
          this.toastrService.success('L\export a bien été envoyé', 'Success');
      },
          error => {
              this.toastrService.error('L\'email n\'a pas été envoyé', 'Erreur');
          }
      );
  
      }
     }