Как отобразить данные документа пожарного депо динамически, используя angular?

Question

Моя база данных Firestore:

-> (collection) : category
                -> (document) : products
                               -> (collection) : product1
                                                -> (document) : firstProduct: productName : First
                                                                              productPrice: 123
                                                              secondProduct: productName : Second
                                                                             productPrice: 1234

Теперь у меня отображены все документы в одном компоненте, но я не могу показать подробную информацию о клике по конкретному идентификатору документа. , Например, если я нажму firstProduct, то информация о firstProduct должна отобразиться в другом компоненте, а если я нажму secondProduct, то информация о secondProduct должна отобразиться в другом компоненте.

Это мой firebase.service.ts

this.users = this.db.collection('category').doc("products").collection("product1").snapshotChanges().map(  
  changes => {  

    return changes.map(  
      a => {  
        const data = a.payload.doc.data() as User;  
        data.id = a.payload.doc.id;
        return data;  

      });  

  });  

Это my component.ts

 ngOnInit(): void {

this._data.getUsers().subscribe(  
  (user: User[]) => {  
    this._Activatedroute.paramMap.subscribe(params => { 
      this.id = params.get('id');
    this.items = user;    
  }  
); 
});
}

Это мой route.ts, дополнительный продукт - это компонент, в котором я хочу показать детали этого конкретный документ, на который я нажал.

{ path: 'add-product/:id', component: AddProductComponent },