I have my user input as below in my html file:
<div class="form-group col-md-4">
<label for="btsIp"><strong>BTS IP:</strong></label> <input ngModel type="text"
name="btsIp" class="form-control" id="btsIp" (blur)="onChange()" [(ngModel)]="btsIp">
</div>
In my component.ts i am using it as
btsIp: any and passing it in my request
let Data = {
"btsIp": this.btsIp
}
which is working fine. But i want to pass this btsIp value to another page/Component where i need to call a request again where i need to pass the same btsIp value.
Could you all please help?
Passing data to the other page/component, it depends on whether it's the parent component, a sibling component, or a completely unrelated component in a different route.
Parent component: you can trigger a parent's component function by hooking on the #Output of the child component. Or you can access child component's properties via #ViewChild declaration. Read more: https://angular.io/guide/component-interaction
Sibling component: first transfer to the parent component as describe above, then pass the data from parent to child component via child's #Input.
A completely different page in a different route: you can pass the data via route params. Read more: https://angular.io/guide/router
Other approach: if you can afford using NgRx (state management inspired by Redux powered by RxJs for Angular), everything will be much easier once you mastered it, but that's a huge other topic that cannot be included in this answer box. More at https://github.com/ngrx/platform
Create a new ts File, inject that in to your module, use get and set
get IP (){
return this.btsIp;
}
set IP (btsIp){
this.btsIp= btsIp;
}
Hope it would help
Related
I am building a simple Ember app, but I have run into difficulty passing an action closure to a child component when that component is rendered in the {{outlet}} of a navigable container.
For context, here is a quick look at the aesthetically-astonishing app I have been building:
I have a roles/role path that displays a component (the yellow section above) with the following markup. Note that the model for this component is an instance of a Role:
// file: app/components/role.hbs
<p>{{#role.name}}</p>
<div>
{{sel-nav-tabs items=this.tabConfig}}
<div class='route-content'>{{outlet}}</div>
</div>
(Where "sel" stands for "someone else's library".)
this.tabConfig is defines in the corresponding class:
// file: app/components.role.js
import Component from '#glimmer/component';
export default class RoleComponent extends Component {
get tabConfig() {
return [
{ label: 'Users', route: 'roles.role.users' },
{ label: 'Privileges', route: 'roles.role.privileges' },
];
}
}
Into the outlet in role.hbs will be rendered the appropriate list component, either users or privileges.
The users list is rendered by the following component. Note that the model is the list of User instances associated with the Role from its parent:
// file: app/components/role/user-list.hbs
<ul>
{{#each #users as |user|}}
<li>
{{user.name}}
{{#sel-button type="toolbar" onActivate=this.removeUser}}
{{sel-icon/remove-circle}}
{{/sel-button}}
</li>
{{/each}}
</ul>
and when the button is clicked it calls an action defined in the RoleUserListComponent class:
// file: app/components/role/user-list.js
import Component from '#glimmer/component';
import { action } from "#ember/object";
export default class RoleUserListComponent extends Component {
#action removeUser(user) {
// remove the user model from the role... but which role?
}
}
The catch is that the relationship between users and roles is many-to-many, so I can't simply unset the user's owner and let Ember Data take care of things. The obvious answer seemed like passing an action closure from the role component to its child user-list component.
Except, there seems to be no way to pass the action closure through the {{outlet}}. What I was hoping for was something like:
{{outlet onActivate=(action removeUser #role)}}
which would pass the closure to any component that was rendered there. I tried instead to use {{yield user}} in the child to let the parent render the delete button and give it the appropriate action, but that also hit the outlet wall.
I also tried to use controllers, which aren't documented that well, probably since their role seems to have been evolving dramatically over Ember's maturation. But while this brief explanation does mention passing down actions, it doesn't go into details, and the few up-to-date examples I found all seem to break when an outlet joins the party.
I'm suspecting that {{outlet}} just plain isn't closure-friendly.
While defining a service would probably work, that doesn't seem to be what services are intended for, and I'd be cluttering up my global space to solve a local problem.
What is the best practice (or, really, any practice) for dealing with getting messages through outlets? I looked for ways to query the earlier parts of the path, but I didn't find any that were defined in the relevant classes.
EDIT to add more detail:
The route template for /roles/role is simply:
// file app/templates/roles/role
{{role role=#model}}
Where the Role component is in the first listing above. (I also added the role.js file contents above.) My reasoning for doing that was that by making a component I created a logical place to put the config (rather than inline helper functions) and it just gave me a sense of tidiness to have all ui elements be in components.
If a refactor can be the anchor to a good solution (essentially copying the entire Role component into the route template), however, I'll happily do it.
{{outlet}} only supports one optional string argument for a named outlet and nothing else, so you won't be able to achieve this through the use of {{outlet}}!
I'm creating a single page application (SPA) that uses Vue Router, therefore it is comprised mostly of Vue components with one blade component that puts it all together using
<router-view></router-view>
I want to know how I can pass data computed within my controller and pass it to a Vue component. The current way I'm doing it is by exposing extra API endpoints, for example in my controller I have:
public function countUsers()
{
$userCount = DB::table('users')->count();
return $userCount;
}
Then in api.php:
Route::get('usercount', 'UserMController#countUsers');
this way I can get the data within my Vue component using axios.get call to usercount.
Is there a better way of doing this? The data seems to take 1-2 seconds to display on the page and I can't imagine having this implementation for over 20 computations I need to do.
I've seen another method where you attach the data into the JavaScript context using the blade template, but I'm not sure how to get that to work for a SPA with Vue Routers.
get userCount in your controller and pass it to normal blade file. You can pass the variable in vue like below.
<router-view userCount="{{userCount}}"></router-view>
then for accessing userCount variable in vue, you can load this variable from props.
export default {
props: ['userCount'],
name: 'router-view',
},
mounted:function(){
let a = this;
this.userCount = JSON.parse(this.userCount)
}
for more information you should read the documentation first. It will help you understand thoroughly.
https://v2.vuejs.org/v2/guide/components-props.html
Angular 1.5 component communication suggestions usually have output bindings to invoke methods on root controllers.
Let's say I have a root component, and two child components.
<root>
<child-1></child-1>
<child-2></child-2>
</root>
It'd like to react to a button click on component one by reading a value on component two and then doing something in the root.
For example, child-1 is a directive which wraps a drawing library that attaches a drawing to its DOM node and has a variable to control that drawing.
child-2 has a button. When it is clicked, data from the child-1 variable should be passed on to root which does something with it.
Specifically, child-1 wraps var graph2d = new vis.Graph2d(container, dataset, options);. Later on, I would like to retrieve some information from graph2d and pass it on to root to do something with it.
This boils down to: how can components react to events issued by other components? The inputs and outputs suggestions don't seem to cover that scenario.
In angular 1.5 you can use require and/or property bindings (input/output) to communicate.
If you use the require property then your root component would publish an api and your child component would get a reference to the controller:
angular.module('app').component('child1', {
bindings: {},
require: {api: '^root'}, //your <root> component
template: '',
controller: controller
});
You can then use the methods of the root component in your child component:
$ctrl.api.addWatchedBook();
This is the root component controller function:
$ctrl.addWatchedBook = addWatchedBook;
function addWatchedBook(bookName){
booksWatched.push(bookName);
}
Here is a complete architectual overview: Component Communications
The UI Router manages states for AngularJS applications and supports nested views as well as multiple named views for the same state.
Multiple named views are used like this:
<body>
<div ui-view="viewA"></div>
<div ui-view="viewB"></div>
</body>
You can also pass URL-parameters into states when navigating between states via ui-sref (Check this question: Angular ui-router - how to access parameters in nested, named view, passed from the parent template?).
Q: Is it possible to pass parameters to a named view using ui-view which then is propagated to the according state?
Q: How do i pass parameters if i switch between states by using $state.go(newState)?
A:
$state.go(newState, { Param: 123 });
The $state.go(newState, { Param: 123 }) suggested in the comments is definitely valid.
I tried using another method and it worked as well.In the main app.js file where I have defined my states, I defined a variable var myData={}; outside the module definition(but in the JS file) . Think of this as a global data variable of sorts.
In the controller for viewA you can set a variable by setting
myData.somevalue=$scope.valueFromViewA;
You can access this value in viewB by something like
$scope.valueInB=myData.somevalue
As I said, this is one way of doing it, services is another and the methods in the comment are valid too.
I wonder if I can modify a property that is in a component via an external controller.
That is, I have an injected component in index.html as follows:
{{ button-feed }}
This component is used in many views.
This component has to be hidden as I get values in the controller, and what I really want is that since this controller, modify a property that hides or shows the button.
The component has the form:
App.ButtonComponent = Ember.Component.extend ({
hideClass: false
});
The property hideClass is used to display or not the button. What I want is to modify this property but using a controller that does not belong to the component button.
I tried to access the property from outside the component, but it is impossible.
You can pass parameters to your component like this:
{{button-feed hideClass=true}}
{{button-feed hideClass=false}}
Also, you could pass in a controller property too.
{{button-feed hideClass=controllerProperty}}
To answer your comment, you can set the controllerProperty by using the code below. Since controllerProperty is bound to the hideClass on your component, changing controllerProperty will change hideClass.
controller.set('controllerProperty', false);
You can read more about setting properties on a controller here.