Angular block-ui isn't working on my frontend application-CodePudding

im developing the frontend of a crud application, and i needed to increment the block-ui from angular to block the page when the page has to do a request to the backend, but it isnt working at all. I have followed this tutorial: A Block UI implementation for Angular but still got errors.

Im using

[ Angular CLI: 13.2.3 Node: 16.14.0 Package Manager: npm 8.3.1]

Heres my module:

@NgModule({
  declarations: [
    CadastroCidadesComponent,
    TabelaCidadesComponent,
    CidadesComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    InputTextModule,
    ButtonModule,
    TableModule,
    CascadeSelectModule,
    DropdownModule,
    InputNumberModule,
    SharedModule,
    TooltipModule,
    HttpClientModule,
    ReactiveFormsModule,
    BlockUIModule.forRoot()
  ],
  exports: [
    CadastroCidadesComponent,
    CidadesComponent
  ]
})
export class CidadeModule { }

Heres my component:

@Component({
  selector: 'app-cidades',
  templateUrl: './cidades.component.html',
  styleUrls: ['./cidades.component.css']
})
export class CidadesComponent implements OnInit {

  //variables

  @BlockUI() blockUI!: NgBlockUI;

  constructor(private cidadeService:CidadeService) { }

  //code

  startBlock(){
    this.blockUI.start();
    setTimeout(() => {
      this.blockUI.stop();
    }, 5000);
  }

}

When i call startBlock() it doesnt show nothing.

Any help is appreciated, thanks in advance :)

CodePudding user response：

Have you tried putting a <div *blockUI="'list'"> on your html and linking to the @BlockUI like @BlockUI('list') blockUI!: NgBlockUI;?

CodePudding user response：

Here is the example of how to do it. https://stackblitz.com/edit/ng-block-ui-component?file=src/app/app.component.html