want to add class to font picker react. I tried with simple using class but it was not added.
version "font-picker-react": "^3.4.1",
import React from "react";
import FontPicker from "font-picker-react";
<FontPicker
apiKey="AIzaSyCrAmkqacuiyammyv400dq-l6QUNZkoMSE"
activeFontFamily={this.state.activeFontFamily}
onChange={(nextFont) =>
this.setState({
activeFontFamily: nextFont.family
})
}
/>
Related
I try to download a file pdf.
import React, {Component} from 'react';
import cv from "../media/Test.pdf";
export default class Downloader extends Component {
render() {
return (
<div className="pdf">
Download
</div>
);
}
}
why the target="_blank" doesn't work?
I can't work out why Angular will not allow me to reference my components selector. I have a page which when you click on a list item the page should bring up another templates html. This is my code.
The error I keep receiving is 'message-component' is not a known element:
1. If 'message-component' is an Angular component, then verify that it is part of this module.
2. If 'message-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
Messages.component.html
<div id="Case" class="w3-container city" style="display:none">
<h2>Case</h2>
<message-case> </message-case>
</div>
I don't understand why it is giving me this error when the Message Component is declared and imported in both the NgModule and within the component.
Messages.Module.ts
#NgModule
({
imports: [SharedModule],
declarations: [
MessagesComponent,
MessageCaseComponent,
MessagesFilterPipe,
CreateMessageComponent,
],
})
Finally this is the file I am trying to display using the components selector
import { Component, OnInit } from '#angular/core';
import { IMessage } from './message';
import { ActivatedRoute, Router, Params } from '#angular/router';
import {MessagesComponent} from './messages.component';
import {CreateMessageComponent} from './createmessage.component';
#Component
({
moduleId: module.id,
selector: 'message-case',
templateUrl: 'message-case.html'
})
All help would be appreciated! I'm seemingly at a dead end right now.
Firstable the name file is wrong you putted this filename in the description
"Messages.component.html"
And the path of the template must contains "./" if it is in the same folder if it is in another folder you must put the relative path folder/file
#Component
({
moduleId: module.id,
selector: 'message-case',
templateUrl: './Messages.component.html'
})
What I want to do is when I hover on the 'click me' button then it should show an image on the web page and when i unhover it should not show any image with the help of mouseover option
here is what i tried to do in app.component.ts and my.component.ts files
here is the code for app.component.ts :
import { Component } from '#angular/core'; //importing components from angular
import { MyComponent } from './my.component'; //importing components from my.component
#Component({
selector: 'my-app',
template: `<h1> Hi Buddy!! </h1>
<mytag></mytag>`,
directives: [MyComponent] //adding directives from mycomponents
})
export class AppComponent { }
and here is the code for my.component.ts:
import { Component } from "#angular/core";
#Component({
selector:'mytag',
template: `<button (mouseover)="<img [src]="image"> " >click me</button>` // here i tried to flash image by hovering
})
export class MyComponent{
public image="http://lorempixel.com/400/200";
myclick(klm){
console.log(klm);
}
}
so what changes should i make in the class or meta data of my.component.ts in order to do so
You can use Angular Animations module to achieve the same.
Make the below changes to your MyComponent:
import { Component } from '#angular/core'
import { trigger, state, style, transition, animate, keyframes, group } from '#angular/animations';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#Component({
selector:'mytag',
template: `<button (mouseover)="toggleOnOff()">click me</button>
<img [src]="image" [#switchImageDisplay]="showImage"/>
`
,
animations: [
trigger("switchImageDisplay",[
state("show", style({
display : 'block'
})),
state("hide", style({
display : 'none'
})),
transition('show <-> hide',[animate('0s')]),
])
]
})
export class SwitchDisplayComponent {
public image="http://lorempixel.com/400/200";
public showImage : string;
toggleOnOff(){
console.log("Previous display value is",this.showImage);
this.showImage = (this.showImage === "show") ? "hide" : "show";
console.log("Current display value is",this.showImage);
}
}
Explanation:
toggleOnOff() function sets a string variable showImage as show and hide.
In Animations we create a trigger and give it a name. In our case we have named it as "switchImageDisplay". We declared two states in the animation trigger that is "show" and "hide". In those states we defined what CSS to be used. Finally we defined a transition, which is 2 ways binded and is performed in 0 seconds. If you want the image to be hidden over a period of time increase the time.
In template code, we have binded the img tag to the animation using the code [#switchImageDisplay]="showImage". Based on the "showImage" value, the animation "switchImageDisplay"'s state is defined.
Import the import { BrowserAnimationsModule } from '#angular/platform-browser/animations'; in your app.module.ts and in the imports array as well.
I am trying to create an application that has two bottom navigation tabs, and each one will be a different component
This is my code:
import {Page} from 'ionic-angular';
import {Component} from 'angular2/core';
import {ckAutoLoanCalculator} from '../../components/ckAutoLoanCalculator/ckAutoLoanCalculator';
#Page({
template: `<ion-navbar *navbar class="contact_navbar">
<ion-title>Loan calculator</ion-title>
</ion-navbar>
<ion-content><ck-auto-loan-calculator></ck-auto-loan-calculator></ion-content>`,
})
class CompareRates {}
#Page({
templateUrl: 'build/pages/home/home.html',
directives: [ckAutoLoanCalculator],
})
export class Home {
loan_calculator: any;
compare_rates: any;
constructor() {
this.loan_calculator = LoanCalculator;
this.compare_rates = CompareRates;
}
}
As you can see, I am trying to load ck-auto-loan-calculator component when clicking on the Loan calculator tab .. but it does not load the content, although I can see <ck-auto-loan-calculator> inside the content
Do I need to trigger something, or ?
It looks like you are missing the import for your custom tab component.
In Angular2, to pass the class reference to the directives property, you need to make it available in that files 'variable scope'
import {ckAutoLoanCalculator} from './path/to/component'
I would include the ckAutoLoanCalculator class into the page that actually uses it, in your case the CompareRates one:
#Page({
template: `
<ion-navbar *navbar class="contact_navbar">
<ion-title>Loan calculator</ion-title>
</ion-navbar>
<ion-content>
<ck-auto-loan-calculator></ck-auto-loan-calculator>
</ion-content>
`,
directives: [ckAutoLoanCalculator]
})
class CompareRates {}
and not the Home one.
It was actually export class CompareRates {} what I needed
I tried to create a angular2 application that loads two components.
The first component called app works fine.
but the second component don't (called app-second).
index.html code
<h1>Demo of Angular 2 using ASP.NET 5 with Visual Studio 2015</h1>
<app>Loading...</app>
<br />
<app-second>Loading...</app-second>
app.ts code
import {Component} from 'angular2/core';
#Component({
selector: 'app',
template: 'My First Angular 2 App'
})
export class AppComponent {}
app-second.ts code
import {Component} from 'angular2/core';
#Component({
selector: 'app-second',
template: 'My First Angular 2 App'
})
export class AppSecondComponent{}
A Snapshot:
Can anybody tell me what is the error here?
Thanx.
You need to bootstrap your second app too.
//Importing bootstrap to instantiate your app
import {bootstrap} from 'angular2/platform/browser'
//importing the components you need to load
import {AppComponent} from './app/app'
import {AppSecondComponent} from './app/app-second'
//instantiating the components
bootstrap(AppComponent);
bootstrap(AppSecondComponent);
hope this helps.
You need to bootstrap both components
bootstrap(AppComponent, ...);
bootstrap(AppSecondComponent, ...);