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 !!
Related
When I create a new component file in my angular project by " ng g c 'component name' ", OnInit is not there initially in my component file.
It has been removed in Angular 15. You can also add it manually
#Component({
...
})
export class MyComponent extends OnInit {
ngOnInit(): void {
// your init code
}
}
It has been removed in Angular 15 by default. Just add it back yourself.
you can add it manually by yourself
#Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent extends OnInit {
ngOnInit(): void {
}
}
I am using this wrapper for the azure maps library. I am currently implementing a symbol layer and using one of the default markers works well, but I am not able to add my own marker. I tried to add a custom marker like in my mapReady function, but the response is always undefined and the image is not added.
this is my component:
import {Component, Input, OnInit} from '#angular/core';
import * as atlas from 'azure-maps-control';
#Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
private markerImagePath = 'assets/images/map-marker.png';
public dataSource: atlas.source.DataSource;
markerDescription: 'marker';
public options: atlas.IconOptions = {
image: this.markerDescription
};
points = [
[52.52437, 13.41053],
[51.50853, -0.12574]
];
ngOnInit() { }
mapReady(map: atlas.Map) {
map.imageSprite.add(this.markerDescription, this.markerImagePath).then(r => {
console.log(r);
console.log(map.imageSprite.getImageIds());
this.dataSource = new atlas.source.DataSource('markers');
this.points.forEach(p => {
const point = new atlas.Shape(new atlas.data.Point([p[1], p[0]]));
this.dataSource.add([point]);
});
});
}
}
this is my html:
<section>
<div class="row">
<div class="col-12 map-dimensions my-2 mx-auto" azure-map zoom="2"
[dataSources]="[dataSource]" (onReady)="mapReady($event.map)">
<map-symbol-layer dataSourceId="markers"
[iconOptions]="options"></map-symbol-layer>
</div>
</div>
</section>
I suspect, that I access the map data wrongly... Do any of you guys know, how I can add a custom image to the imageSprites in order for me to use it as a marker in the symbol layer?
Your code looks fine. imageSprite.add returns a Promise<void>, so your console.log will always log undefined. Could your icon be the issue ? I have been trying a similar solution and all works fine on my side :
import { Component } from '#angular/core';
import * as atlas from 'azure-maps-control';
#Component({
selector: 'app-root',
template: '<azure-map zoom="2" [dataSources]="[dataSource]" (onReady)="mapReady($event.map)">' +
'<map-symbol-layer [id]="blueLayerId" dataSourceId="blue" [iconOptions]="blueIconOptions"></map-symbol-layer>' +
'</azure-map>',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public dataSource: atlas.source.DataSource;
public blueLayerId: string = "blueLayer";
public blueIconOptions: atlas.IconOptions = {
image: 'campground'
};
mapReady(map: atlas.Map) {
map.imageSprite.add('campground', 'assets/campground.png').then(() => {
this.dataSource = new atlas.source.DataSource('blue');
for (let i = 0; i < 10; i++) {
const point = new atlas.Shape(new atlas.data.Point([i * 5, i * 5]));
this.dataSource.add([point]);
}
});
}
}
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>
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() { }
}
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);