Angular components of the entity

For an entity, there are six component classes generated in four files and four HTML files that are used in the components. 

ProductComponent, defined in product.component.ts handles the main listing screen. It uses product.component.html, as the template. The component manages the view and their actions. It also calls multiple services to fetch data and to do other actions such as alerts and event broadcasts:

@Component({
    selector: 'jhi-product',
    templateUrl: './product.component.html'
})
export class ProductComponent implements OnInit, OnDestroy {
    ...
}

product-dialog.component.ts defines ProductDialogComponent and ProductPopupComponent, which handle the create/edit dialog page using template product-dialog.component.html:

@Component({
    selector: 'jhi-product-dialog',
    templateUrl: './product-dialog.component.html'
})
export class ProductDialogComponent implements OnInit {
    ...
}

@Component({
    selector: 'jhi-product-popup',
    template: ''
})
export class ProductPopupComponent implements OnInit, OnDestroy {
    ...
}

ProductDetailComponent handles the detail view screen using product-detail.component.html as the template and is defined in product-detail.component.ts.

ProductDeleteDialogComponent and ProductDeletePopupComponent defined in product-delete-dialog.component.ts manages the delete popup dialog using product-delete-dialog.component.html as the template.