Develop Reference

Fetched data not rendering in Angular

I'm trying to fetch data From an API using Angular. I can see in the console log that the data is fetched, however the data doesn't render on the page. Help appreciated.
Here is my code:
app.component.html
<p>{{data.Name}}</p>
<p>{{data.Habitat}}</p>
<p>{{data.Status}}</p>
app.component.ts
import { ApiserviceService } from './Service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'apidata';
data:any;
constructor(private _apiservie:ApiserviceService){}
ngOnInit(){
this._apiservie.getdata().subscribe(res=>{
this.data=res;
console.log(res)
})
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { HttpClientModule } from '#angular/common/http';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
service.ts
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class ApiserviceService {
constructor(private _http:HttpClient){}
getdata(){
return this._http.get('https://mocki.io/v1/8f823c35-8ae8-4fb5-a84b-cf7dce59c7a7');
}
}

app.component.ts
import { ApiserviceService } from './Service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'apidata';
data:any;
constructor(private _apiservie:ApiserviceService){}
ngOnInit(){
this.getinfo()
}
getinfo(){
this._apiservie.getdata().subscribe(res=>{
this.data=res;
console.log(res)
})
}
}
app.component.html
<div *ngFor="let item of data">
<p>{{item.Name}}</p>
<p>{{item.Habitat}}</p>
<p>{{item.Status}}</p>
</div>

How to pass data from app.component.ts to its app.module.ts in Angular?

Due to the requirements of project I need to send data value dataOne in app.component.ts to its app.module.ts so that I can store it in variable moduleValue. Please refer code below and suggest how can achieve this transfer of data within files.
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'formcheck';
dataOne: any;
getValues(val: any) {
console.warn(val);
this.dataOne = val;
}
}
app.module.ts
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
let moduleValue: any;
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
}

I'd suggest that you declare a variable or an observable in a service, however, since you mentioned that you need to do this within the same files you might want to export a variable from your component and import it into your module like so:
app.component.ts
export class AppComponent {
title = 'formcheck';
dataOne: any;
getValues(val: any) {
console.warn(val);
this.dataOne = val;
DATA = this.dataOne;
}
}
export var DATA = '';
app.module.ts
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DATA } from './app.component';
let moduleValue: any;
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
}

Here is the solution using service, I used BehaviorSubject for dynamic updation of value.
https://stackblitz.com/edit/angular-9pitmh?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fdata.service.ts,src%2Fapp%2Fhello.component.ts

I am trying to enable the about us button. I have added the path, I have added router link to the container div of the button. What am I missing?

First is the path in my app routing module
Then the home component
Next is the app component
Lastly the html for button creation
path in the app.routing.module.ts
{
path: 'about-us',
pathMatch: 'full',
data: { type: '', breadcrumb: '' },
component: AboutUsComponent,
},
default constructor and ngOnInit in home.component.ts only router variable in constructor
import { Component, OnInit } from '#angular/core';
import {Router} from '#angular/router';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
constructor(private router : Router) {}
ngOnInit(): void {}
}
default imports in app.module.ts only
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { LoginComponent } from './login/login.component';
import { LogoutComponent } from './logout/logout.component';
import { SocialMediaComponent } from './social-media/social-media.component';
import { LoggedInHomeComponent } from './logged-in-home/logged-in-home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutUsComponent,
LoginComponent,
LogoutComponent,
SocialMediaComponent,
LoggedInHomeComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
**button creation code home.component.html**
<div class="about-us">
<button class="button-box" type="button">
<a [routerLink]="'about-us'" [routerLinkActive]="['active']">about-us</a>
</button>
</div>
*My objectives are:
i. Redirect to about us component on click
ii. Open about us component when path is mentioned in url
But neither is working!*

You are missing to import RouterModule from import { RouterModule } from '#angular/router';

Hope you have include RoutingModule in AppRoutingModule. If so try the following code
<a [routerLink]="['about-us']" [routerLinkActive]="['active']">about-us</a>

Have you added router-outlet in
app.component.html file.
Add only above tag & remove everything else from app.component.html if added
Try this & let me know

Javascript Angular4 Service method not recognize

I have created a simple service using angular4
Here's the code:
//app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { MyserviceService } from './myservice.service';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }
//the service
import { Injectable } from '#angular/core';
#Injectable()
export class MyserviceService {
constructor() { }
cars = ['fiat', 'form'];
myData() {
return 'Hello from service!';
}
}
//app.component.ts
import { Component, OnInit } from '#angular/core';
import { MyserviceService } from './myservice.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
constructor(private myservice: MyserviceService) {}
ngOnInit() {
console.log(this.myservice.cars);
this.something = this.myData();
}
}
I am having 2 problems here:
No console message
myData is not recognized 'myData does not exists in app.component'
What I'm I doing wrong here?

You are accessing myData() method on app.component, it is not a member of app component. you have to access myData() with myservice, like this
ngOnInit() {
console.log(this.myservice.cars);
this.something = this.myservice.myData();
}
and Everything else looks fine to me.

AngularJS 2 calling a directive inside another one

I'm trying to follow the angualrJS 2.0 tutorial on calling another component inside another one. However I'm getting an error saying that it is not a known element on the <main-footer></main-footer> selector. What am i doing wrong?
//app.component.ts
import { Component } from '#angular/core';
import { ROUTER_DIRECTIVES } from '#angular/router';
import { FooterComponent } from './footer.component';
#Component({
selector: 'my-app',
// use templateurl for template files
template: `
<h1>My First Angular App 22</h1>
<main-footer></main-footer>
`,
directives: [FooterComponent]
})
export class AppComponent {
}
// footer.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'main-footer',
template: `
<h2>The footer</h2>
`,
})
export class FooterComponent{
}
EDIT
So I got it working, by declaring and importing the file in app.module.ts as well as the app.component.ts file Thanks to the help from #Chang I did not see this in the tutorials on AngualrJS 2.0
// app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { FooterComponent } from './footer.component';
#NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, FooterComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }

can try to declare "FooterComponent" in your app.modules ?
#NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
routing
],
declarations: [
AppComponent,
FooterComponent
],
providers: [
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}