import { Component, OnInit } from '#angular/core';
*import * as AOS from 'aos';*
#Component({
selector: 'app-component',
templateUrl: './app-component.component.html',
styleUrls: ['./app-component.component.scss'],
})
export class AppComponent implements OnInit {
constructor( ) { }
ngOnInit() {
*AOS.init();*
}
I'm using this way but not working yet.If it's possible or not?
Related
I have a myapp.component.ts file in which I have the following
import { Component, Input, OnInit, ViewChild } from '#angular/core';
import { isNullOrUndefined } from 'util';
import { AuthenticationService } from '/services';
import * as _ from 'lodash';
#Component({
selector: 'cd-myapp',
templateUrl: './myapp.component.html',
styleUrls: ['./myapp.component.scss']
})
export class myAppComponent implements OnInit {
#Input() car: Car;
constructor(
private authenticationService: AuthenticationService) { }
ngOnInit() {
//my code
}
}
I have another component, in which I have the following in the carhandler.component.ts file :
import { Component, OnInit, Input, Output, EventEmitter } from
'#angular/core';
#Component({
selector: 'app-carhandler',
templateUrl: './carhandler.component.html',
styleUrls: ['./carhandler.component.scss']
})
export class CarhandlerComponent implements OnInit {
#Input() field: string;
#Input() value: string;
constructor() { }
ngOnInit() {
}}
In my myapp.component.html I would like to append. I tried this :
<app-carhandler [field]="Testing"
[value] = "'DESCRIPTION' | translate" +'-'+{{car.color}}>
</app-carhandler >
It does not work. How should I tackle this problem?
I'm sorry, i'm having no explanation why, but it works this way:
<app-carhandler [field]="Testing"
[value] = "(('DESCRIPTION' | translate) +'-'+ car.color)">
</app-carhandler >
I have a simple page with angular and typescript with just 1 button and 1 text field. I want to make a post request to a link that posts the string written in text box.
my button html:
<a class="button-size">
Add Customer
</a>
and button ts file:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'customer-button123',
templateUrl: './blabla',
styleUrls: ['./clacla']
})
export class AddCustomerButtonComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
text box html:
<mat-form-field>
<input matInput placeholder="Customer Name">
</mat-form-field>
text box ts file:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'customer-text-field',
templateUrl: './blabla2',
styleUrls: ['./clacla2']
})
export class CustomerTextFieldComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
and simple wrapper page html is:
<div class="input-label">
<mg-customer-text-field></mg-customer-text-field>
</div>
<div>
<mg-customer-button123></mg-customer-button123>
</div>
How can i send a post reques to link localhost8080/admin/addCustomer ?
If you hosting your front end at port: 4200 (default Angular port serve) and you want to send a request to http://localhost8080/admin/addCustomer, you will need a proxy configuration. You can see right here for more info: https://itnext.io/angular-cli-proxy-configuration-4311acec9d6f
You use the HttpModule
I use a service to separate http requests.
Example
import { Component, OnInit } from '#angular/core';
import { ApiService } from '../../services/api.service';
#Component({
selector: 'customer-button123',
templateUrl: './blabla',
styleUrls: ['./clacla']
})
export class AddCustomerButtonComponent implements OnInit {
data: any;
results: any;
constructor(private apiService: ApiService) { }
ngOnInit() {
}
getDataFromApi() {
this.apiService.getData(this.data).subscribe(results => {
this.results = results;
});
}
ApiService
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class ApiService {
apiUrl: string = environment.apiUrl;
constructor(private http: HttpClient) {}
getData(data): any {
return this.http.get(`http://localhost:8080/api/get-data`);
}
html
<div class="input-label">
<mg-customer-text-field [(ngModel)]="data"></mg-customer-text-field>
</div>
<div>
<mg-customer-button123 (click)="getDataFromApi()"></mg-customer-button123>
</div>
I have two components(comp1 and comp2). I am trying to call a function which is inside comp1 from comp2 and it is not happening and it is throwing an error. But it is successful when calling a function inside comp2 from comp1.
I want it to happen in both the ways
(i.e)
(a) function trigger from comp2 inside comp1
(b)function trigger from comp1 inside comp2
I have attached the sample code.
https://stackblitz.com/edit/angular-jxfzqb
The error is throwing from constructor function on comp1, it cant generate a new instance of comp2.
Please try not use provides of components between components, i suggest you make getting binding components from app.component to comp1 and comp2, example:
app.component.html
<app-comp1 #comp1 [Comp2Component]="comp2"></app-comp1>
<app-comp2 #comp2 [Comp1Component]="comp1"></app-comp2>
app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Comp1Component } from './comp1/comp1.component';
import { Comp2Component } from './comp1/comp2/comp2.component';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
// Get component with attr #comp1
#ViewChild('comp1') comp1: Comp1Component;
// Get component with attr #comp2
#ViewChild('comp2') comp2: Comp2Component;
}
comp1.component.ts
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-comp1',
templateUrl: './comp1.component.html',
styleUrls: ['./comp1.component.css']
})
export class Comp1Component implements OnInit {
#Input() Comp2Component: Comp2Component;
constructor() { }
ngOnInit() {
}
funcInComp1() {
console.log("comp1 function triggered from comp2");
}
triggerComp2Function() {
this.Comp2Component.funcInComp2();
}
}
comp2.component.ts
import { Input, Component, OnInit } from '#angular/core';
import { Comp1Component } from '../comp1.component';
#Component({
selector: 'app-comp2',
templateUrl: './comp2.component.html',
styleUrls: ['./comp2.component.css']
})
export class Comp2Component implements OnInit {
#Input() Comp1Component: Comp1Component
constructor() { }
ngOnInit() {
}
triggerComp1Function() {
this.Comp1Component.funcInComp1();
}
funcInComp2() {
console.log("comp2 function triggered from comp1");
}
}
stackblitz:
https://stackblitz.com/edit/angular-itmzhe
I am trying to create a div and then add a component into that div during runtime. I was wondering how i could do this.
this is my components html:
<p>
<label >name</label>
</p>
this is my components ts :
import { Component, OnInit} from '#angular/core';
#Component({
selector: 'app-newcomp',
templateUrl: './newcomp.component.html',
styleUrls: ['./newcomp.component.css']
})
export class NewcompComponent implements OnInit {
name: string;
constructor() {
}
ngOnInit() {
}
}
This is where it will be called
import { Component } from '#angular/core';
import { NewcompComponent } from './newcomp/newcomp.component';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor() {
this.Newcomp();
}
Newcomp() {
const div = document.createElement('div');
document.body.appendChild(div);
<-- this is where the component is added to the div, how can i achieve this.
}
}
If someone could help me it would be greatly appreciated. :)
Also i know this example is simple, but keeping it simple will allow for clarity in the answer.
import { Component } from '#angular/core';
import { NewcompComponent } from './newcomp/newcomp.component';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
component: Type<any>;
constructor() {
this.component = this.newcomp();
}
private newcomp() {
// use this method for logic
return NewcompComponent;
}
}
In app.component.html add:
<ng-container *ngComponentOutlet="component"></ng-container>
For more info Angular's component outlet info & Angular's dynamic component creation
I want to update the value of str which I used in the view of child component from the parent component, by calling the function change() of child component
here is my code.
import { Component } from '#angular/core';
import { ChildComponent } from './child/child.component';
#Component({
selector: 'app-root',
template: `
<h1>parent</h1>
<button (click)="changeChild()">change child</button>
<app-child></app-child>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private cc:ChildComponent) {}
changeChild(){
this.cc.change();
}
}
and the child component is:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-child',
template: `
<p>{{str}}</p>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
private str;
constructor() {
this.str = 'initial'
}
change(){
this.str = 'changed'
}
ngOnInit() {
}
}
but the value str in the view never updated to "changed".
please Any help because I am new in Angular 4 ??
Use #ViewChild to get reference of child component
in Parent component
import {ChildComponent} from 'child.component.ts'
export class ParentComponent{
------
#ViewChild(ChildComponent)
private child:ChildComponent
---
changeChild(){
this.child.change()
}
}