logo
Tags down

shadow

How to update data on change when using TemplateRef from parent component in child in Angular


By : Erikson de Leon
Date : August 27 2020, 12:00 AM
I hope this helps . I have a child component which renders template from parent like embededView. , Try doing this:
parent.component.ts
code :
exports class ParentComponent {
   public someProp$: Observable<string>;
   private propSource: Subject<string>;

   constructor() {
     this.propSource = new Subject();
     this.someProp$ = this.propSource.asObservable();
   }
   ngOnInit() {
      this.someHttpFunc();
   }

   public someHttpFunc() {
      // psuedo code for http calls
      httpCall.subscribe(() => {
        const newValue = 'x'; // here it's the new value of your props
        this.propSource.next(newValue)
      });
   }
}
<child someRef="template"></child>
  <ng-template #template>

  <div>{{ someProp$ | async }}</div>
</ng-template>


Share : facebook icon twitter icon

Parent's data change does not update child component in vuejs


By : Alivia
Date : March 29 2020, 07:55 AM
this one helps. The data function is only called once during the life cycle of the component; when it is initially created. So essentially your component is just displaying the value as it existed when the component was created.
Additionally, it's generally bad practice to reach out of a component to get a data value. Vue is props down, events up. You should convert your component to use a property.
code :
Vue.component('times-updated', {
  props:["times"],
  template: '<span>Times Updated: {{ times }}</span>',
})

React - Update data in the parent component after a change in child component


By : HermannSW
Date : March 29 2020, 07:55 AM
help you fix your problem I started to learn React and after reading a the docs and a few tutorials I decided to build a basic todo application. The data is provided by mockapi.io. Right now I have two components, List which is responsible for getting and displaying the data and Item which represents a single todo item. , In the parent component, we would pass in a prop function:
code :
import React from 'react';
import axios from 'axios';
import Item from './Item';
import { API_URL } from './config';

class List extends React.Component {
    constructor() {
        super();

        this.state = {
            items: [],
            error: null                
        }

        this.fetchData = this.fetchData.bind(this);
        this.deleteItem = this.deleteItem.bind(this);
    }

    fetchData() {
        axios.get(`${API_URL}/todos`)
            .then(response => {
                this.setState({
                    items: response.data
                });
            })
            .catch(error => {
                this.setState({
                    error: 'Error while fetching data.'
                });
            });
        }

    componentWillMount() {
        this.fetchData();
    }

    deleteItem(id) {
        this.setState(prevState=>{
            const newItems = prevState.items.filter((item)=>item.id!==id);
            return {
                items: newItems
            }
        })
    }   

    render() {
        const { items, error } = this.state;

        if (error) {
            return (
                <div>
                    <p>{error}</p>
                </div>
            );
        }

        return (
            <div className="list-container">
                {items.map((item) => (                                        
                    <Item current={item} key={item.id} deleteItem={this.deleteItem} />                    
                ))}
            </div>
        );
    }
}

export default List;
import React from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';
import { API_URL } from './config';

class Item extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            item: props.current,
            error: null
        }
    }

    completeTask(id) {
        axios.put(`${API_URL}/todos/${id}`, { 
            completed: true
        })
        .then(response => {
            console.log(response);
        })
        .catch(error => {
            this.setState({
                error: 'Error while updating data.'
            });
        });
    }

    deleteTask(id) {
        axios.delete(`${API_URL}/todos/${id}`, { 
            completed: true
        })
        .then(response => {
            console.log(response);
            this.props.deleteItem(id);
        })
        .catch(error => {
            this.setState({
                error: 'Error while deleting data.'
            });
        });
    }

    render() {
        const  { item, error } = this.state;

        if (error) {
            return (
                <div>
                    <p>{error}</p>
                </div>
            );
        }

        return (                                                    
            <div className="list-item" key={item.id}>
                <p>
                    <span style={{textDecoration: item.completed ? 'line-through' : 'none'}}>{item.title}</span> 
                    <br />                             
                    {!item.completed && <button onClick={() => this.completeTask(item.id)}>Complete</button>}                            
                    <button onClick={() => this.deleteTask(item.id)}>Delete</button>
                </p>
            </div>                                    
        );
    }
}

Item.propTypes = {
    current: PropTypes.object.isRequired
}

VueJS: Change data within child component and update parent's data.


By : user2027539
Date : March 29 2020, 07:55 AM
it fixes the issue You are looking for $emit. In the child component emit the data changes to the parent by using $emit('updateData', payload). You can then listen for the update on the component, for example like this:
code :
<business-hours @updateData="doSomething(payload)" :injected-data="hours" :injected-days="data.days[0]">

angular templateRef passed to parent using structural directive not rendering inside parent component


By : user2423820
Date : March 29 2020, 07:55 AM
To fix this issue According to your diagram, you seem to have two nested ng-template.
Angular will transform the following which uses a structural directive:
code :
<ng-template *myTemplate>
    <div>...</div>
</ng-template>
<ng-template myTemplate>
    <ng-template>
        <div>...</div>
    </ng-template>
</ng-template>

Angular 5 Pass data on click event from parent component to child component on button clicked at parent component


By : DV4
Date : March 29 2020, 07:55 AM
wish help you to fix your issue You can use the @Input and @Output decorator to achieve the required output:
Changes:
code :
<div>
  <table *ngIf="isVisible === true">
    <tr>
      <th>
        Id
      </th>
      <th>
        name
      </th>
      <th>
        username
      </th>
      <th>
        email
      </th>
    </tr>
    <tr *ngFor="let data of userInformation">
      <td>{{data.id}}
      </td>
      <td>{{data.name}}
      </td>
      <td>{{data.username}}
      </td>
      <td>{{data.email}}
      </td>
      <td>
        <a (click)="onSelect(data)">Go to
        </a>
      </td>
    </tr>
  </table>

  <div *ngIf="isVisible === false">
    <app-test-child [userInfo]="clickedUser" (notify)="backToList($event)"></app-test-child>
  </div>
</div>
userInformation: any;
isVisible : boolean = true;
clickedUser: any;
onSelect(data)
{
   this.isVisible = false;
   this.clickedUser = data;
}

backToList(flag) {
  this.isVisible = flag;
  console.log(flag)
}
<table>
  <tr>
    <th>
      Id
    </th>
    <th>
      name
    </th>
    <th>
      username
    </th>
    <th>
      email
    </th>
  </tr>
  <tr>
    <td>{{clickedUser.id}}
    </td>
    <td>{{clickedUser.name}}
    </td>
    <td>{{clickedUser.username}}
    </td>
    <td>{{clickedUser.email}}
    </td>
    <td>
      <a (click)="backToList()">Back
      </a>
    </td>
  </tr>
</table>
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';


@Input() userInfo: any;
@Output() notify: EventEmitter<any> = new EventEmitter<any>();

clickedUser: any;

constructor() { }

ngOnInit() {
  this.clickedUser = this.userInfo;
}

backToList() {
  var flag = true;
  this.notify.emit(flag);
}
Related Posts Related Posts :
  • Kubernetes internal CORS issues between services
  • Ionic set marker on location or based on longitude and latitude
  • CAN NOT expand Angular Material table
  • Share a angular library across multiple projects
  • How to import pipe to 2 modules(AppModule and ChildModule)?
  • How to disable the drag option on Angular material Slide toggle component
  • Does Spartacus support Hybris on-premise?
  • Bind regular expression from json to typescript
  • How can i get the selected value in ion-alert radio alert
  • How to get all attributes of an object
  • Using angular elements inside the same angular project
  • RxJS assign observable and get data in one stream
  • Why I can not use anguar/material elements?
  • Getting Error when running 'ng test' Command
  • How can I make another request within catchError?
  • angular 7 input number validation
  • Dont show digits after decimal using angular pipe
  • How to use same component in normal way and with angular material dialog both?
  • How to integrate ReSharper with WebStorm
  • Google cloud application yaml for angular 7
  • How to perform concurrent HTTP requests on rows of a table
  • Angular 7 - deploy workspace applications (projects) in isolation
  • how to turn off differential loading in Angular v8?
  • How to add and update npm packages for a new Angular app in Visual Studio 2019
  • Angular 7, Ngrx, Rxjs 6 - Accessing state between lazy loaded modules
  • cannot find symbol import com.google.firebase.iid.FirebaseInstanceIdService error in ionic3
  • AWS CodePipeline, build failed and getting error
  • CORS problem with Angular and laravel even after setting the CORS header and server response
  • Angular, when the variable is mentioned in the url, the variable is not replaced with its value. Ex: ${username}
  • How to apply two ngIf on single html element with two different conditions
  • Ionic not importing ngx-mathjax module
  • How to display base64 image on iPhone in Ionic 4
  • ngFor in columns with diferents properties
  • How catch the http errors with map
  • How to format a Date field in Angular project
  • focusing ng-select filter input on drop down open
  • Angular 7 PDFJS Component
  • NestJs Errors stemming from @types dependencies in node_modules when running start:prod on fresh project
  • How to override ion-back-button action in ionic 4 with angular 7
  • How can I have an array in input form?
  • Angular 6 component test with a variable into HTML
  • Why is ES7/array polyfill needed despite the tsconfig target is set to ES5
  • How to deal with Google recaptcha backend validation response delay
  • Logging in using @angular/fire/auth results in 403 error on localhost
  • In Angular, with ViewChild/ ViewChildren, how do I get the child of a child?
  • Material Dialog Close on mouseleave (angular material)
  • Ngx-Datatable - How to handle a boolean data of a row
  • Send data post in angular
  • Expected Arguments 1-3, but got 0
  • Immediate response after subscribtion
  • Convert JSON array received from API to JSON Object in Angular
  • Ionic 4 with angular 7, Cannot find type definition file for '@types'
  • ngrx effects property payload does not exist on type never
  • Child component life cycle in parent component
  • How to make custom wrapper for 2 field groups with ngx-formly?
  • Subject.subscribe not firing in ngOnInit
  • Angular Nginx Docker 404
  • I have 'expression changed after it has been checked error 'if I use *ngif, but it not appears if i use [hidden]
  • Selection animation doesn't work for Angular (7) Material Tabs
  • Create Component without folder
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk