Here goes yet another Angular2(TS) question form me.
In my application i have a parent component, with a button. (class="btn btn-success"
)
When this button i Clicked, i call a functioncreateUserBool
, that changes the state og a Boolean createUserBool
. This Boolean is used with a *ngIf
on a child component to show this component.(<createuser [createUser]="createUserBool" *ngIf="createUserBool"></createuser>
)
The child component is a "Modal" and i want to use a button in this "Modal" to trigger the Boolean and close the "Modal".
I have tried a couple of things but i only seem to be able to change Child variables form the parent and not the other way around.
I hope someone can help me. I am still new to Angular. If theres an better way to accomplish a similar result please feel free to enlighten me!
Parent Component:
//Imports from Librays
import {Component, View, Input} from "angular2/core";
import {JSONP_PROVIDERS, HTTP_PROVIDERS} from 'angular2/http';
import {Http, Jsonp} from 'angular2/http';
//Component imports
import {FooterComponent} from '../footer/footer.component';
import {HeaderComponent} from '../header/header.component';
import {CreateUserComponent} from './createuser.component';
//Pipe imports
import {userType} from '../../pipes/userType.pipe';
//Service imports
import {ApiHelper} from '../../services/api.service';
@Component({
selector: 'useradministration',
providers: [HTTP_PROVIDERS, ApiHelper],
})
@View({
templateUrl: '../../templates/useradmin/useradmin.html',
directives: [HeaderComponent, FooterComponent, CreateUserComponent],
pipes: [userType],
})
export class UserAdministration {
private alluserdata;
constructor(private ApiService: ApiHelper) {
ApiService.getAllUsers().subscribe(
users => this.allusers(users)
);
}
allusers(users){
this.alluserdata = users;
}
createUserBool: boolean;
public onCreateToggle() { this.createUserBool = !this.createUserBool; console.log(this.createUserBool)}
}
Parent Template: (Some of it)
<div class="page-container-bg-solid page-boxed page-md">
<adnexio-header protected></adnexio-header>
<div class="container">
//Soem content here
</div>
<createuser [createUser]="createUserBool" *ngIf="createUserBool"></createuser>
<adnexio-footer></adnexio-footer>
</div>
Child Component:
//Imports from angular2
import {Component, View, ChangeDetectionStrategy, NgZone, Input} from "angular2/core";
import {Http, Headers, RequestOptions, JSONP_PROVIDERS, HTTP_PROVIDERS, Response} from 'angular2/http';
import {FORM_PROVIDERS, FormBuilder, Validators, ControlGroup, Control} from 'angular2/common';
import {Observable} from 'rxjs/Observable';
//Component imports
import {FooterComponent} from '../footer/footer.component';
import {HeaderComponent} from '../header/header.component';
import {UserAdministration} from './useradmin.component';
//Pipe imports
import {userType} from '../../pipes/userType.pipe';
//Service imports
import {ApiHelper} from '../../services/api.service';
@Component({
selector: 'createuser',
providers: [HTTP_PROVIDERS, ApiHelper]
})
@View({
templateUrl: '../../templates/useradmin/createuser.html',
directives: [HeaderComponent, FooterComponent /*, UserAdministration*/],
pipes: [userType]
})
export class CreateUserComponent {
@Input() createUser: boolean;
superDupererrorMessage = "No error";
public usertypes;
form: ControlGroup;
constructor(public theApiHelper: ApiHelper, fb: FormBuilder) {
theApiHelper.getUserTypes().subscribe(types => {
this.usertypes = types;
});
this.form = fb.group({
"firstName": ["", Validators.required],
"lastName": ["", Validators.required],
"email": ["", Validators.required],
"type": ["", Validators.required],
"password": ["", Validators.required],
"confirmPassword": ["", Validators.required],
});
}
//Submit function:
public onSubmit() {
console.log(this.form.value);
this.theApiHelper.createUser(this.form.value)
.subscribe((err) => {
this.superDupererrorMessage = err
console.log(this.superDupererrorMessage);
});
}
public createUserToggle(){
this.createUser = !this.createUser;
console.log(this.createUser)
}
}
Child Template: (Some of it)
<div class="overlay">
<div class="overlayContainer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="errorMessage alert alert-danger" >
<strong>Error!</strong> {{superDupererrorMessage}}
</div>
<div class="portlet-title">
<div class="caption caption-md">
<i class="icon-user font-green"></i>
<span class="caption-subject font-green bold uppercase">User Creation</span>
<span class="caption-helper">Create them users!</span>
</div>
<div class="actions">
<button type="button" class="btn btn-danger" (click)="createUserToggle()">Cancel creation</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>