how to render the view of component when calling the function from another component in angular4

Question

I have app.component like below

/*// 

import { Component } from '@angular/core';

import { DndComponent } from './dnd/dnd.component';

@Component({

  selector: 'app-root',

  template: ' (click)="sample()"',

  styleUrls: ['./app.component.css'],

})

export class AppComponent {

constructor(public ob:DndComponent) {

}

sample(){

this.ob.changevar();
}

}


/*//

And, I have another dnd component like

/*//

import { Component } from '@angular/core';

@Component({

  selector: 'dnd',

  template: '<div>{{name}}</div>',

  styleUrls: ['../app.component.css']

})

export class DndComponent {

name:string="saran"

constructor(){ 

}

changevar(){

this.name="kumar";
}

}

/*//

here, I am trying to change the name value with method calling from another component. The name value is updating but the view is not rendering.

is there any way to render the other component view dynamically with an on-click method from another component.

Thanks,

score 0 · Answer 1 · answered Jul 26 '17 at 14:02

When you want to call a function in one component on trigger of some event in another component, you can use event binding. See my answer here Call function from one component to another component Angularjs 2.

This can be done only when one component is a part of another component. This is not valid for two independent components. If you are looking for this case, then please clarify in the description.

score 0 · Answer 2 · answered Jul 26 '17 at 14:08

0

I'm not so clear about your question but based on this

is there any way to render the other component view dynamically with an on-click method from another component.

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router'; 
import { DndComponent } from './dnd/dnd.component';

@Component({

  selector: 'app-root',

  template: ' (click)="sample()"',

  styleUrls: ['./app.component.css'],

})

export class AppComponent {

constructor(public ob:DndComponent, private router: Router) {

}

sample(){
this.router.navigate['/Dnd']
//this.ob.changevar();
}

}

app.routing.ts

import { Routes, RouterModule, CanActivate} from '@angular/router';
import { PublicDealsComponent } from './public-deals.component';
import { DndComponent } from './dnd/dnd.component';
import { AppComponent } from './app.component';


const appRoutes: Routes = [
  // Add the redirect
  {
    path: '',
    redirectTo: '/appComponent',
    pathMatch: 'full',

  },
  {
    path: 'appComponent',
    component: AppComponent 
  },
  {
    path: 'Dnd',
    component: DndComponent ,

  },

];

export const routing = RouterModule.forRoot(appRoutes);

export const routedComponents = [AppComponent , DndComponent ];

answered Jul 26 '17 at 14:08

k11k2

2,036
2
22
36

thanks k11k2 , this is view update with routing method but I want to update the variable value that is changed from another component in dnd component name=''saran" and the view is already loaded. in app component with a method calling i want change the name variable value from saran to kumar. This functionlity i want to do from another component. – saran Jul 27 '17 at 05:59
@saran view is loading but name value is not changing? – k11k2 Jul 27 '17 at 06:06
the view is loading in the page load time. after that, I'm trying to change the name value from other component button click. exactly the question is Changing one component view content from another component button click . did u understand the question? – saran Jul 27 '17 at 06:32
The value is changing but the view is not updating because i am doing click operation from different component – saran Jul 27 '17 at 06:41
changed value is not updating on the current view ? – k11k2 Jul 27 '17 at 06:43
yes, from the same component with method calling both value and view are updating.but, from the different component with method calling value is updating but the view is not updating. – saran Jul 27 '17 at 06:49
@saran firstly, can I know where your route navigation occurs ? , my guess is your routing to another view before method execution complete. – k11k2 Jul 28 '17 at 04:49
just think, I have 3 components.One is app-root and another one is ABC and third one is def. I am calling other two components in app-root with rout-outlet method . when page load the app-root and abc componets will load and web page will display. after that i am clikcing a button in app-root component view. it is calling a one of the method in the abc component. some content in the abc view i am trying to change. the problem is it is entering into the method in the abc componet and in the console i'm getting the updated data but in the view it is not updating – saran Aug 01 '17 at 06:41
oh, why don't you use @Input() for sending values from parent to child component. Once try it. I have done this by using `@Input()` and `@Output()` – k11k2 Aug 04 '17 at 10:20
Yes, K11k2 I also tried with @Input() method. It is working for sending variable values. but I want to receive complete div code.and update in the another component – saran Aug 05 '17 at 06:55
this would may help you [link](https://stackoverflow.com/questions/42274276/angular2-can-i-use-viewchild-and-input-at-the-same-time) – k11k2 Aug 07 '17 at 06:42

how to render the view of component when calling the function from another component in angular4

2 Answers2