My question is about the way of have access to childerns component methods from parent component. I found solution which is describe using below example, but I afraid that may be I do it in wrong, not 'angular2 right' way.
For instance we have child:
#Component({ ... })
export class Modal {
...
open() {
...
}
}
And parent:
import { Modal } from '../common';
...
#Component({
selector: 'editor',
directives: [ Modal ],
templateUrl: './editor.html',
...
})
export class Editor {
_modal = null;
...
bindModal(modal) { this._modal=modal; }
open() {
this._modal.open();
}
}
And in editor.html:
<button (click)="open()">Open Editor</button>
<modal #editModal>{{ bindModal(editModal) }}
Here is my editor body in modal (popup) window
...
</modal>
This is solution for have access from Editor component to the open() method inside Modal component. It is a little bit tricky. The question is: is there a simplest and more direct way without using 'bindModal' method?
There are many ways to do it,
#ViewChild
import {ViewChild} from '#angular/core';
import { Modal } from '../common';
...
#Component({
selector: 'editor',
directives: [ Modal ],
templateUrl: './editor.html',
...
})
export class Editor {
#ViewChild(Modal) md:Modal;
Open()
{
this.md.open();
}
}
Other way is to use #localVariable and from parent itself you can access child methods.
Related
I'm building an NativeScript app using angular flavor. In the HTML side I've tried to bind to an TouchEvent but this is the error that I've got.
Error message:
Argument of type 'Event' is not assignable to parameter of type 'PanGestureEventData'.
Type 'Event' is missing the following properties from type 'PanGestureEventData': deltaX, deltaY, state, view, and 4 more.ngtsc(2345)
component.html
<Label
class="content-drawer"
(pan)="onPanMoveContainer($event)"
alignSelf="center"
textAlignment="center"
[text]="'fa-window-minimize' | fonticon"
class="fa"
fontSize="20"
></Label>
component.ts
import { AfterViewInit, ChangeDetectorRef, Component, OnInit } from '#angular/core';
import { BottomSheetLayoutBaseComponent } from '#loyaltyversion2/xplat/features';
import { PanState } from '#loyaltyversion2/xplat/nativescript/utils';
import { PanGestureEventData, View } from '#nativescript/core';
#Component({
moduleId: module.id,
selector: 'app-bottom-sheet-layout',
templateUrl: './bottom-sheet-layout.component.html',
styleUrls: ['./bottom-sheet-layout.scss'],
})
export class BottomSheetLayoutComponent
extends BottomSheetLayoutBaseComponent
{
private currentContentTransitionY = 200;
constructor() {
super();
}
onPanMoveContainer(event: PanGestureEventData) {
// TODO: why can't we use TouchGestureEventData
this.moveContentToLocation(this.currentContentTransitionY + event.deltaY);
if (event.state === PanState.UP) {
this.currentContentTransitionY =
this.currentContentTransitionY + event.deltaY;
}
}
}
My workspace is generated using nx/xplat#^12.0.0 and my guess is that there should be some misconfiguration regarding my tsconfig or some linters that are setup by xplat app generator but I didn't change anything in those files. Any guesses?
The error indicates that there is a mixup between the event name and the function's expected parameter type.
If you want to use the pan event with the PanGestureEventData:
<Label
(pan)="onPanMoveContainer($event)"
></Label>
onPanMoveContainer(event: PanGestureEventData) {
}
If you want to use the touch event with the TouchGestureEventData:
<Label
(touch)="onTouchMoveContainer($event)"
></Label>
onTouchMoveContainer(event: TouchGestureEventData) {
}
I had to disable 'strictTemplates' option in 'compilerOptions' located in your 'tsconfig.js'
Hello Guys I am new to Angular and learning the things using the following tutorial link. For some reason the canDeactivate route guard seem to not work. Any help would be appreciated as I tried checking many things but none worked. I have the latest angular CLI and there are not errors in my code and for some reason the canDeactivate function is not at all called during the route change.
I am applying the function on the CreateEmployee route so when I fill the form for createEmployee and I try to navigate to different route then it should kick in.
create-employee-component.html: In this, I have few form elements
<form #employeeForm = "ngForm" (ngSubmit)="saveEmployee()" [ngClass]="{'was-validated': employeeForm.submitted}" novalidate>
create-employee-component.ts
import { Component, OnInit, ViewChild } from '#angular/core';
import { NgForm } from '#angular/forms';
import { Department } from '../models/department.model';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { Employee } from '../models/employee.model';
import { EmployeeService } from './employee.service';
import { Router } from '#angular/router';
#Component({
selector: 'app-create-employee',
templateUrl: './create-employee.component.html',
styleUrls: ['./create-employee.component.css']
})
export class CreateEmployeeComponent implements OnInit {
#ViewChild('employeeForm') public createEmployeeForm: NgForm;
datePickerConfig: Partial<BsDatepickerConfig>;
previewPhoto = false;
create-employee-can-deactivate-guard.service.ts
import { Injectable } from '#angular/core';
import { CanDeactivate } from '#angular/router';
import { CreateEmployeeComponent } from './create-employee.component';
#Injectable()
export class CreateEmployeeCanDeactivateGuardService implements CanDeactivate<CreateEmployeeComponent>{
canDeactivate(component: CreateEmployeeComponent): boolean{
alert("HJEJJEJEJ");
if(component.createEmployeeForm.dirty)
{
return confirm('Are you sure you want to discard your changes?');
}
return true;
}
}
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { ListEmployeesComponent } from './employees/list-employees.component';
import { CreateEmployeeComponent } from './employees/create-employee.component';
import { CreateEmployeeCanDeactivateGuardService } from './employees/create-employee-can-deactivate-guard.service';
const routes: Routes = [
{path: 'list', component: ListEmployeesComponent},
{
path:'create',
component: CreateEmployeeComponent,
canDeactivate: [CreateEmployeeCanDeactivateGuardService]
},
{path: '', redirectTo:'/list', pathMatch:'full'}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [CreateEmployeeCanDeactivateGuardService]
})
export class AppRoutingModule { }
I feel everything is correct as per some of the other answers I found on the StackOverflow. Please let me know what am I doing wrong here. I have also posted my code here.
I finally found out what was the issue. After some time spending on the research I found out that in the navbar previously I was using the href element with the anchor tag hence the canDeactivate guard was not kicking in. Now I changed it to [routerLink]="['/list']" and the canDeactivate started working correctly.
Posting the answer as it may be useful for someone who is looking for solution:
Previous Navbar with the anchor tag and href element:
<a class="nav-link" href="list">List <span class="sr-only">(current)</span></a>
Changed Navbar with the anchor tag and routerLink which is working fine with the canDeactivate:
<a class="nav-link" [routerLink]="['/list']">List <span class="sr-only">(current)</span></a>
If in case you are looking for the whole code please check the question where I have mentioned all the code chunks related to canDeactivate guard.
I'd like to build an app using Ionic 4 that simplistically works the following way:
On-boarding page is shown with some images/text
After user clicked 'start' button, some flag onboarded=true is written into local-storage
User redirected to the main app view which is a ion-split-pane containing side-menu layout
Next time when user launches the app, I check if he/she already viewed on-boarding screen (by checking presence of onboarded var in storage) and if it is - I immediately redirect the user to the main app having side-menu layout as I mentioned, omitting on-boarding screen.
I started the project using ionic cli, based on side-menu template and to fulfill logic described above, I modified it the following way:
app.component.ts
import { Component } from '#angular/core';
import { Platform } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { Storage } from '#ionic/storage';
import { Router } from '#angular/router';
#Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>',
})
export class AppComponent {
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private storage: Storage,
private router: Router
) {
this.initializeApp();
}
async initializeApp() {
await this.platform.ready();
this.statusBar.styleDefault();
this.splashScreen.hide();
const onboarded = await this.storage.get('onboarded');
if (onboarded) {
this.router.navigate(['main-app']);
} else {
this.router.navigate(['onboarding']);
}
}
}
onboarding.page.html
<ion-header>
<ion-toolbar>
<ion-title>onboarding</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
Welcome aboard!
<ion-button (click)="start()">Start app!</ion-button>
</ion-content>
onboarding.page.ts
import { Component } from '#angular/core';
import { Storage } from '#ionic/storage';
import { Router } from '#angular/router';
#Component({
selector: 'app-onboarding',
templateUrl: './onboarding.page.html',
styleUrls: ['./onboarding.page.scss'],
})
export class OnboardingPage {
constructor(
private storage: Storage,
private router: Router
) { }
start() {
this.storage.set('onboarded', true);
this.router.navigate(['main-app']);
}
}
main-app.page.html
<ion-app>
<ion-split-pane>
<ion-menu>
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
main-app.page.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-main-app',
templateUrl: './main-app.page.html',
styleUrls: ['./main-app.page.scss'],
})
export class MainAppPage {
public appPages = [
{
title: 'Home',
url: '/home',
icon: 'home'
},
{
title: 'List',
url: '/list',
icon: 'list'
}
];
constructor() { }
}
List and Home pages are just empty pages and their content is not important for this example
Problem is that main-app containing side menu and content is not working properly. I know that there is a problem in <ion-router-outlet main></ion-router-outlet>'s usage but couldn't find the right solution.
Does anyone have idea how to make it work?
Thanks!
Andrew.
try adding contentId="content" to your <ion-menu>
ie: <ion-menu contentId="content">
and also add id="content" to your <ion-router-outlet>
ie: <ion-router-outlet id="content" main>
i seem to remember something about the router-outlet not working without that.
Need help figuring out how to include images in a reusable component that is referenced in another app.
For example, I have an Angular App, let's call it UI-Common, that contains common components and another Angular App, let's call it Command-Center, that will use those common components.
In UI-Common, there is a component called my-control.component that is defined as follows:
[my-control.component.html]
<div>
<img src="assets/images/myImage.png"/>
<div class"username" *ngIf="user">
<p><strong>{{user.companyName}}</strong></p>
<p>{{user.firstName + ' ' + user.lastName}}</p>
</div>
[my-control.component.ts]
import { Component, Input } from '#angular/core';
import { User } from '../../models/user';
#Component({
selector: 'my-control',
templateUrl: './my-control.component.html',
styleUrls: ['./my-control.component.scss'],
})
export class MyControlComponent {
#Input() user: User;
constructor() {
}
}
In Command-Center, it adds UI-Common as a dependency in the package.json. A Command-Center component is created and uses my-control.component as follows:
[app.module.ts]
...
import { HomeComponent } from './home/home.component';
import { MyControlComponent } from 'ui-common';
#NgModule({
declarations: [
...,
HomeComponent,
MyControlComponent,
...
],
...
})
export class AppModule { }
[home.component.html]
<my-control [user]=user></my-control>
<div class="homeContent">
blah blah blah...
</div>
[home.component.ts]
import { Component } from '#angular/core';
import { User } from 'ui-common';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent {
user: User;
constructor() {
this.user = new User();
this.user.companyName = 'iHeartMedia';
this.user.firstName = 'John';
this.user.lastName = 'Smith';
}
}
The problem is the image on my-control when running from Command-Center does not load at all. This appears to be because the image path being used "assets/images/myImage.png" does not exist in Command-Center. I don't want to save a copy of the image in the Command-Center's assets folder. How do I properly handle images in the common component?
Found this Angular CLI feature request: https://github.com/angular/angular-cli/issues/3555
The Angular app can be configured to copy files from a relative file path to a folder within the app's distribution directory. This allows us to get access to images from within the node_modules folder without having to manually copy the images into the local assets folder.
After updating to the latest version of Angular CLI (1.2.1) I modified my angular-cli.json file as follows:
{
...
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico",
"version.txt",
{
"glob": "**/*",
"input": "../node_modules/ui-common/src/assets/images",
"output": "./assets/images"
}
],
...
}
Now all images that are in the UI-Common app are accessible to the Command-Center app.
More details about the configuration here: https://github.com/angular/angular-cli/wiki/stories-asset-configuration
import {APP_BASE_HREF} from '#angular/common';
#NgModule({
declarations: [ ... ],
imports: [ ... ],
providers: [{provide: APP_BASE_HREF, useValue : '/' }]
]);
I think you need to do something like this for the module you want to to use the image in.
I'm trying to trigger an animation on an hidden element of a child component. To be simple, the animation should occur when the element appears, and then each time a user click on a button from the parent component.
Here is simple code :
(tried to plunkr it, but impossible to import trigger component from angular core)
app.ts
import {ChildComponent} from './child';
#Component({
selector: 'my-app',
template: `
<button id="showChildButton" (click)="setShowChild()">Show Child</button>
<button id="triggerAnimation">Trigger animation</button>
<child-component *ngIf="showChild"></child-component>
`
.....
})
export class App {
showChild: boolean = false;
setShowChild() {
this.showChild = true;
}
}
child.ts
import {
Component,
trigger,
state,
style,
transition,
animate
} from '#angular/core'
#Component({
selector: 'child-component',
template: `<h1 [#inflateIn]>Hello</h1>`,
animations: [
trigger('inflateIn', [
transition('void => *', [
animate(100, style({ transform: 'scale(1.1)'}))
]),
transition('* => *', [
animate(100, style({ transform: 'scale(1.1)'}))
])
])
]
})
export class ChildComponent {
}
I am able to animate the , the first time it appears, but I can't figure out how to trigger this animation again, when clicking on button #triggerAnimation of the parent component.
I searched for examples but I didn't find anything that solve my case.
Thanks for your help
You have to toggle the showChild variable. You can change your setShowChild() method as follows
setShowChild() {
this.showChild === false ? true : false;
}
It checks if this.showChild is false so make it true otherwise false to hide it again.
I hope this is what you wanted to get the desired result?