Hello I am trying to create a global component on Ionic.io with Angular 11
I made a basic app and generated a component naming header
In header component I changed the selector to
Now when I am trying to call the component in any of the modules it throws an error
core.js:14841 NG0304: 'dynamic-header' is not a known element:
1. If 'dynamic-header' is an Angular component, then verify that it is part of this module.
2. If 'dynamic-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
on the console
here is the header.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'dynamic-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
constructor() { }
ngOnInit() {}
}
Here is the app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeaderComponent } from './header/header.component';
#NgModule({
declarations: [AppComponent,HeaderComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
schemas:[CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
I also tried importing the Schema but didn't work
Here is the other module contact.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { IonicModule } from '#ionic/angular';
import { ContactPageRoutingModule } from './contact-routing.module';
import { ContactPage } from './contact.page';
import { HeaderComponent } from '../header/header.component';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
HeaderComponent,
ContactPageRoutingModule
],
declarations: [ContactPage]
})
export class ContactPageModule {}
And this is the html code
<ion-header>
<ion-toolbar>
<ion-title></ion-title>
</ion-toolbar>
</ion-header>
<dynamic-header></dynamic-header>
<ion-content>
<ion-grid class="ion-padding">
<ion-card>
<ion-card-header>
<ion-card-subtitle class="ion-padding">Feel free to write to us</ion-card-subtitle>
<ion-card-title class="ion-padding">Contact Us</ion-card-title>
</ion-card-header>
<ion-card-content>
echo background using --background
</ion-card-content>
</ion-card>
<ion-row>
<ion-col class="ion-align-self-center">
<h3 class="ion-padding">Meet us at our Location</h3>
<ul>
<li><strong>Address:</strong> Jalpaiguri, West Bengal</li>
<li><strong >Email:</strong><ion-button class="mail" href="mailto:khabarjalpaiguri#gmail.com" size="small" slot="end" color="light" fill="trasparent">khabarjalpaiguri#gmail.com</ion-button></li>
</ul>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label position="floating"> Your Name</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Your Email</ion-label>
<ion-input type="mail"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Subject</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Your Message</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<ion-item>
<ion-button type="submit" color="primary" class="ion-text-center" >Submit Query</ion-button>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Related
I have a child component inside kendo ui angular Panelbar to which i need to pass the id, but it comes as undefined in the api url. Here is the code:
<kendo-panelbar [expandMode]="kendoPanelBarExpandMode">
<kendo-panelbar-item *ngFor="let event of events" [title]="event.title">
<ng-template kendoPanelBarContent>
<br>
{{event.id}}
<app-volunteering-emp-list eventID="{{event.id}}"></app-volunteering-
emp-list>
</ng-template>
</kendo-panelbar-item>
</kendo-panelbar>
I think that the problem is this
change the line
<app-volunteering-emp-list eventID="{{event.id}}"></app-volunteering-emp-list>
to this
<app-volunteering-emp-list [eventID]="event.id"></app-volunteering-emp-list>
parent.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-parent',
template: `
<app-child [childMessage]="parentMessage"></app-child>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent{
parentMessage = "message from parent"
constructor() { }
}
child.component.ts
import { Component, Input } from '#angular/core';
#Component({
selector: 'app-child',
template: `
Say {{ message }}
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
#Input() childMessage: string;
constructor() { }
}
I am using MatDialog and opening it from the effect. I want to cover specific part of the page. In this example, it should not cover area which is covered by border. Is it possible?
https://stackblitz.com/edit/ngrx-dialog-effects-vj9qek
We can override the modal backdrop to leave a specific space at the top... we do this by introducing a styles to our component definition.
In your existing stackBlitz, change app.component.ts to be:
import { Component, OnInit } from '#angular/core';
import { Observable } from 'rxjs';
import { Store, select } from '#ngrx/store';
import * as fromRoot from './reducers/';
import { OpenDialog } from './actions';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styles: [`
::ng-deep .cdk-overlay-backdrop { top: 64px; }
`]
})
export class AppComponent {
animal: Observable<string>;
constructor(private store: Store<fromRoot.State>) {
this.animal = this.store.pipe(select(fromRoot.getAnimalName))
}
openDialog() {
this.store.dispatch(new OpenDialog());
}
}
I am trying to integrate Emoji in my Angular 6 Chat application using the library called ngx-emoji-mart
below is my code
My template file - chat.component.html
<div #emojiDiv class="emojiInput" contentEditable="true" [innerHTML]="input" >
</div>
<emoji-mart (emojiClick)="addEmoji($event)"></emoji-mart>
My component class - chat.component.ts
import { Component, OnInit, ViewEncapsulation, ElementRef } from '#angular/core';
#Component({
selector: 'app-chat',
templateUrl: './chat.component.html',
styleUrls: ['./chat.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class ChatComponent implements OnInit {
constructor() { }
ngOnInit() {
}
public addEmoji(){
if(this.input) {
this.input = this.input + "<ngx-emoji emoji='point_up'></ngx-emoji>";
} else{
this.input = "<ngx-emoji emoji='point_up'></ngx-emoji>";
}
}
}
But is not appending to div.
Is there something else I need to add? Thanks in advance
npm install #ctrl/ngx-emoji-mart
import { PickerModule } from '#ctrl/ngx-emoji-mart'
add the stylesheet in angular.json:
"styles": [
"src/styles.css",
"../node_modules/#ctrl/ngx-emoji-mart/picker.css"
],
add this app.module.ts:
#NgModule({
...,
imports: [ ..., PickerModule, ... ],
...
})
Add this in app.component.html
<emoji-mart title="Pick your emoji…" emoji="point_up"></emoji-mart>
Hola !!
I'm trying to build a directive to display a custom numpad when
the control (input) on which the directive is applied is clicked.
I'm Working on Ionic 2 RC5.
myPage.html
<ion-content>
<ion-item>
<ion-label stacked>Label</ion-label>
<ion-input dirNumpad type="text" [(ngModel)]="myField"></ion-input>
</ion-item>
</ion-content>
<ion-footer>
<numpad #idNumpad hidden></numpad>
</ion-footer>
The Numpad component is in the DOM, at the bottom of the page.
dirNumpad.ts
import { Directive, ElementRef, ViewChild } from '#angular/core';
import { Numpad } from '../../components/numpad/numpad';
#Directive({
selector: '[dirNumpad]', // Attribute selector
host: {
'(click)': 'onClick()'
}
})
export class DirNumpad {
#ViewChild('idNumpad') numpad: Numpad;
constructor( private el: ElementRef ) {
}
onClick() {
this.showNumpad();
}
showNumpad() {
console.log(this.numpad); => undefined
this.numpad.show(); => error: show property does not exist on undefined
}
}
numpad.html
<div class="numpad" style="position:absolute; top:auto; left:0;
right:0; bottom:0; height:150px;">My Numpad</div>
numpad.ts
import { Component, Input } from '#angular/core';
#Component({
selector: 'numpad',
templateUrl: 'numpad.html'
})
export class Numpad {
constructor() {}
}
My problem: I can not reach the numpad component from inside the directive through ViewChild.
console.log(this.numpad) always returns "undefined"!
I need it to show the numpad only if user clicks on the input on which the directive is applied...
What am I doing wrong?
I'm stucked with this problem, so any help will be appreciated.
ViewChild only applies to the children items of the item. Since the component is not a child in any way of the directive but rather a sibling it cant be received in ViewChild.
You can pass it as part of an input
Declare an input in your component
import { Directive, ElementRef, Input } from '#angular/core';
import { Numpad } from '../../components/numpad/numpad';
#Directive({
selector: '[dirNumpad]', // Attribute selector
host: {
'(click)': 'onClick()'
}
})
export class DirNumpad {
#Input('numpad') numpad: Numpad;
constructor( private el: ElementRef ) {
}
onClick() {
this.showNumpad();
}
showNumpad() {
console.log(this.numpad); => undefined
this.numpad.show(); => error: show property does not exist on undefined
}
}
and set it in your html
<ion-content>
<ion-item>
<ion-label stacked>Label</ion-label>
<ion-input dirNumpad [numpad]="idNumpad" type="text" [(ngModel)]="myField"></ion-input>
</ion-item>
</ion-content>
<ion-footer>
<numpad #idNumpad hidden></numpad>
</ion-footer>
This question already has an answer here:
Error if don't check if {{object.field}} exists
(1 answer)
Closed 6 years ago.
I am using angular2-universal-starter project.
So i was trying to pass an object to a child component using #Input , but its not working correctly.
I have used dynamic component loader to load child component and I want to pass the object to child component.
Following is my code snippet:
app.component.ts
import {Component, Directive, Renderer, DynamicComponentLoader, ElementRef} from 'angular2/core';
import {Http} from 'angular2/http';
import {headingComponent} from './heading.component';
#Directive({
selector: '[x-large]'
})
export class XLarge {
constructor(element: ElementRef, renderer: Renderer) {
// we must interact with the dom through Renderer for webworker/server to see the changes
renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
}
}
#Component({
selector: 'app',
directives: [
XLarge
],
template: `
<div>
<div>
<span x-large>Hello, {{ user.name }}!</span>
</div>
<icici-heading [user]="user"></icici-heading>
</div>
`
})
export class App {
public user;
constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {
dcl.loadNextToLocation(headingComponent, elementRef);
}
ngOnInit(){
this.user = { "id": 11, "name": "Mr. Nice" };
}
}
heading.component.ts
import {Component, OnInit,Input} from 'angular2/core';
#Component({
selector: 'icici-heading',
template: `
<div>
<!--{{user.name}}-->this is not working
{{name}}
</div>
`
})
export class headingComponent implements OnInit {
#Input() user;
name: string;
constructor() { }
ngOnInit() {
this.name="heading is rendered";
}
}
I guess you just need to make your code more forgiving when the value is not yet available.
This will work:
{{user?.name}}
The Elvis or safe-navigation operator only evaluates .name when user != null
For dynamically added components you also need to pass values imperatively
dcl.loadNextToLocation(headingComponent, elementRef)
.then(cmpRef => cmpRef.instance.user = this.user);