Feature/Restructure resources page (#3978)
* Restructure resources page * Update changelog --------- Co-authored-by: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>pull/3992/head
Sony Thomas
4 weeks ago
committed by
GitHub
parent
e05f481344
commit
c790d0df21
@ -0,0 +1,18 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { ResourcesGlossaryPageComponent } from './resources-glossary.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
component: ResourcesGlossaryPageComponent,
|
||||
path: '',
|
||||
title: $localize`Glossary`
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ResourcesGlossaryRoutingModule {}
|
||||
@ -0,0 +1,138 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="h3 mb-4 text-center" i18n>Glossary</h1>
|
||||
<div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Buy and Hold</h3>
|
||||
<div class="mb-1">
|
||||
Buy and hold is a passive investment strategy where you buy assets
|
||||
and hold them for a long period regardless of fluctuations in the
|
||||
market.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.investopedia.com/terms/b/buyandhold.asp"
|
||||
target="_blank"
|
||||
>Buy and Hold →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Deflation</h3>
|
||||
<div class="mb-1">
|
||||
Deflation is a decrease of the general price level for goods and
|
||||
services in an economy over a period of time.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.investopedia.com/terms/d/deflation.asp"
|
||||
target="_blank"
|
||||
>Deflation →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Dollar-Cost Averaging (DCA)</h3>
|
||||
<div class="mb-1">
|
||||
Dollar-cost averaging is an investment strategy where you split
|
||||
the total amount to be invested across periodic purchases of a
|
||||
target asset to reduce the impact of volatility on the overall
|
||||
purchase.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.investopedia.com/terms/d/dollarcostaveraging.asp"
|
||||
target="_blank"
|
||||
>Dollar-Cost Averaging →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Financial Independence</h3>
|
||||
<div class="mb-1">
|
||||
Financial independence is the status of having enough income, for
|
||||
example with a passive income like dividends, to cover your living
|
||||
expenses for the rest of your life.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Financial_independence"
|
||||
target="_blank"
|
||||
>Financial Independence →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">FIRE</h3>
|
||||
<div class="mb-1">
|
||||
FIRE is a movement that promotes saving and investing to achieve
|
||||
financial independence and early retirement.
|
||||
</div>
|
||||
<div>
|
||||
<a href="../en/blog/2023/07/exploring-the-path-to-fire">FIRE →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Inflation</h3>
|
||||
<div class="mb-1">
|
||||
Inflation is an increase of the general price level for goods and
|
||||
services in an economy over a period of time.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.investopedia.com/terms/i/inflation.asp"
|
||||
target="_blank"
|
||||
>Inflation →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (hasPermissionForSubscription) {
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Personal Finance Tools</h3>
|
||||
<div class="mb-1">
|
||||
Personal finance tools are software applications that help
|
||||
individuals manage their money, track expenses, set budgets,
|
||||
monitor investments, and make informed financial decisions.
|
||||
</div>
|
||||
<div>
|
||||
<a [routerLink]="routerLinkResourcesPersonalFinanceTools"
|
||||
>Personal Finance Tools →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Stagflation</h3>
|
||||
<div class="mb-1">
|
||||
Stagflation describes a situation in which there is a stagnant
|
||||
economy with high unemployment and high inflation.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.investopedia.com/terms/s/stagflation.asp"
|
||||
target="_blank"
|
||||
>Stagflation →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,17 @@
|
||||
:host {
|
||||
color: rgb(var(--dark-primary-text));
|
||||
display: block;
|
||||
|
||||
a {
|
||||
color: rgba(var(--palette-primary-500), 1);
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: rgba(var(--palette-primary-300), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.theme-dark) {
|
||||
color: rgb(var(--light-primary-text));
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
import { DataService } from '@ghostfolio/client/services/data.service';
|
||||
import { InfoItem } from '@ghostfolio/common/interfaces';
|
||||
import { hasPermission, permissions } from '@ghostfolio/common/permissions';
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'gf-resources-glossary',
|
||||
styleUrls: ['./resources-glossary.component.scss'],
|
||||
templateUrl: './resources-glossary.component.html'
|
||||
})
|
||||
export class ResourcesGlossaryPageComponent implements OnInit {
|
||||
public hasPermissionForSubscription: boolean;
|
||||
public info: InfoItem;
|
||||
public routerLinkResourcesPersonalFinanceTools = [
|
||||
'/' + $localize`:snake-case:resources`,
|
||||
'personal-finance-tools'
|
||||
];
|
||||
|
||||
public constructor(private dataService: DataService) {
|
||||
this.info = this.dataService.fetchInfo();
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.hasPermissionForSubscription = hasPermission(
|
||||
this.info?.globalPermissions,
|
||||
permissions.enableSubscription
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { ResourcesGlossaryRoutingModule } from './resources-glossary-routing.module';
|
||||
import { ResourcesGlossaryPageComponent } from './resources-glossary.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [ResourcesGlossaryPageComponent],
|
||||
imports: [CommonModule, ResourcesGlossaryRoutingModule, RouterModule]
|
||||
})
|
||||
export class ResourcesGlossaryPageModule {}
|
||||
@ -0,0 +1,18 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { ResourcesGuidesComponent } from './resources-guides.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
component: ResourcesGuidesComponent,
|
||||
path: '',
|
||||
title: $localize`Guides`
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ResourcesGuidesRoutingModule {}
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="h3 mb-4 text-center" i18n>Guides</h1>
|
||||
<div class="mb-5">
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Boringly Getting Rich</h3>
|
||||
<div class="mb-1">
|
||||
The <i>Boringly Getting Rich</i> guide supports you to get started
|
||||
with investing. It introduces a strategy utilizing a broadly
|
||||
diversified, low-cost portfolio excluding the risks of individual
|
||||
stocks.
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://herget.me/investing-guide" target="_blank"
|
||||
>Boringly Getting Rich →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">How do I get my finances in order?</h3>
|
||||
<div class="mb-1">
|
||||
Before you can think of long-term investing, you have to get your
|
||||
finances in order. Learn how you can reach your financial goals
|
||||
easier and faster in this guide.
|
||||
</div>
|
||||
<div>
|
||||
<a href="../en/blog/2022/07/how-do-i-get-my-finances-in-order"
|
||||
>How do I get my finances in order? →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,17 @@
|
||||
:host {
|
||||
color: rgb(var(--dark-primary-text));
|
||||
display: block;
|
||||
|
||||
a {
|
||||
color: rgba(var(--palette-primary-500), 1);
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: rgba(var(--palette-primary-300), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.theme-dark) {
|
||||
color: rgb(var(--light-primary-text));
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'gf-resources-guides',
|
||||
styleUrls: ['./resources-guides.component.scss'],
|
||||
templateUrl: './resources-guides.component.html'
|
||||
})
|
||||
export class ResourcesGuidesComponent {}
|
||||
@ -0,0 +1,12 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { ResourcesGuidesRoutingModule } from './resources-guides-routing.module';
|
||||
import { ResourcesGuidesComponent } from './resources-guides.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [ResourcesGuidesComponent],
|
||||
imports: [CommonModule, ResourcesGuidesRoutingModule, RouterModule]
|
||||
})
|
||||
export class ResourcesGuidesModule {}
|
||||
@ -0,0 +1,18 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { ResourcesMarketsComponent } from './resources-markets.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
component: ResourcesMarketsComponent,
|
||||
path: '',
|
||||
title: $localize`Markets`
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ResourcesMarketsRoutingModule {}
|
||||
@ -0,0 +1,64 @@
|
||||
<div class="container">
|
||||
<h1 class="h3 mb-4 text-center" i18n>Markets</h1>
|
||||
<div class="mb-5">
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Crypto Coins Heatmap</h3>
|
||||
<div class="mb-1">
|
||||
With the <i>Crypto Coins Heatmap</i> you can track the daily market
|
||||
movements of cryptocurrencies as a visual snapshot.
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://www.tradingview.com/heatmap/crypto" target="_blank"
|
||||
>Crypto Coins Heatmap →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Fear & Greed Index</h3>
|
||||
<div class="mb-1">
|
||||
The fear and greed index was developed by <i>CNNMoney</i> to measure
|
||||
the primary emotions (fear and greed) that influence how much
|
||||
investors are willing to pay for stocks.
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://money.cnn.com/data/fear-and-greed/" target="_blank"
|
||||
>Fear & Greed Index →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="mb-4 media">
|
||||
<h3 class="h5 mt-0">Inflation Chart</h3>
|
||||
<div class="mb-1">
|
||||
<i>Inflation Chart</i> helps you find the intrinsic value of stock
|
||||
markets, stock prices, goods and services by adjusting them to the
|
||||
amount of the money supply (M0, M1, M2) or price of other goods (food
|
||||
or oil).
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://inflationchart.com" target="_blank"
|
||||
>Inflation Chart →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Stock Heatmap</h3>
|
||||
<div class="mb-1">
|
||||
With the <i>Stock Heatmap</i> you can track the daily market movements
|
||||
of stocks as a visual snapshot.
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://www.tradingview.com/heatmap/stock" target="_blank"
|
||||
>Stock Heatmap →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,17 @@
|
||||
:host {
|
||||
color: rgb(var(--dark-primary-text));
|
||||
display: block;
|
||||
|
||||
a {
|
||||
color: rgba(var(--palette-primary-500), 1);
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: rgba(var(--palette-primary-300), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.theme-dark) {
|
||||
color: rgb(var(--light-primary-text));
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'gf-resources-markets',
|
||||
styleUrls: ['./resources-markets.component.scss'],
|
||||
templateUrl: './resources-markets.component.html'
|
||||
})
|
||||
export class ResourcesMarketsComponent {}
|
||||
@ -0,0 +1,11 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { ResourcesMarketsRoutingModule } from './resources-markets-routing.module';
|
||||
import { ResourcesMarketsComponent } from './resources-markets.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [ResourcesMarketsComponent],
|
||||
imports: [CommonModule, ResourcesMarketsRoutingModule]
|
||||
})
|
||||
export class ResourcesMarketsModule {}
|
||||
@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { ResourcesOverviewComponent } from './resources-overview.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
component: ResourcesOverviewComponent,
|
||||
path: ''
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ResourcesOverviewRoutingModule {}
|
||||
@ -0,0 +1,16 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="h3 mb-4 text-center" i18n>Resources</h1>
|
||||
<div class="overview-list">
|
||||
@for (item of overviewItems; track item) {
|
||||
<div class="mb-4">
|
||||
<h3 class="h5 mt-0">{{ item.title }}</h3>
|
||||
<p class="mb-1">{{ item.description }}</p>
|
||||
<a [routerLink]="item.link">Explore {{ item.title }} →</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,17 @@
|
||||
:host {
|
||||
color: rgb(var(--dark-primary-text));
|
||||
display: block;
|
||||
|
||||
a {
|
||||
color: rgba(var(--palette-primary-500), 1);
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: rgba(var(--palette-primary-300), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.theme-dark) {
|
||||
color: rgb(var(--light-primary-text));
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'gf-resources-overview',
|
||||
styleUrls: ['./resources-overview.component.scss'],
|
||||
templateUrl: './resources-overview.component.html'
|
||||
})
|
||||
export class ResourcesOverviewComponent {
|
||||
public overviewItems = [
|
||||
{
|
||||
title: 'Frequently Asked Questions (FAQ)',
|
||||
description:
|
||||
'Find quick answers to commonly asked questions about Ghostfolio in our Frequently Asked Questions (FAQ) section.',
|
||||
link: ['/' + $localize`:snake-case:faq`]
|
||||
},
|
||||
{
|
||||
title: 'Guides',
|
||||
description:
|
||||
'Explore our guides to help you get started with investing and managing your finances.',
|
||||
link: [
|
||||
'/' + $localize`:snake-case:resources`,
|
||||
$localize`:snake-case:guides`
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Markets',
|
||||
description:
|
||||
'Access various market resources and tools to stay informed about financial markets.',
|
||||
link: [
|
||||
'/' + $localize`:snake-case:resources`,
|
||||
$localize`:snake-case:markets`
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Glossary',
|
||||
description:
|
||||
'Learn key financial terms and concepts in our comprehensive glossary.',
|
||||
link: [
|
||||
'/' + $localize`:snake-case:resources`,
|
||||
$localize`:snake-case:glossary`
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { ResourcesOverviewRoutingModule } from './resources-overview-routing.module';
|
||||
import { ResourcesOverviewComponent } from './resources-overview.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [ResourcesOverviewComponent],
|
||||
imports: [CommonModule, ResourcesOverviewRoutingModule, RouterModule]
|
||||
})
|
||||
export class ResourcesOverviewModule {}
|
||||
@ -1,258 +1,30 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Resources</h1>
|
||||
<h2 class="h4 mb-3">Ghostfolio</h2>
|
||||
<div class="mb-5">
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Frequently Asked Questions (FAQ)</h3>
|
||||
<div class="mb-1">
|
||||
Find quick answers to commonly asked questions about Ghostfolio in
|
||||
our Frequently Asked Questions (FAQ) section.
|
||||
</div>
|
||||
<div>
|
||||
<a [routerLink]="routerLinkFaq"
|
||||
>Frequently Asked Questions (FAQ) →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="h4 mb-3" i18n>Guides</h2>
|
||||
<div class="mb-5">
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Boringly Getting Rich</h3>
|
||||
<div class="mb-1">
|
||||
The <i>Boringly Getting Rich</i> guide supports you to get started
|
||||
with investing. It introduces a strategy utilizing a broadly
|
||||
diversified, low-cost portfolio excluding the risks of individual
|
||||
stocks.
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://herget.me/investing-guide" target="_blank"
|
||||
>Boringly Getting Rich →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">How do I get my finances in order?</h3>
|
||||
<div class="mb-1">
|
||||
Before you can think of long-term investing, you have to get your
|
||||
finances in order. Learn how you can reach your financial goals
|
||||
easier and faster in this guide.
|
||||
</div>
|
||||
<div>
|
||||
<a href="../en/blog/2022/07/how-do-i-get-my-finances-in-order"
|
||||
>How do I get my finances in order? →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="h4 mb-3" i18n>Markets</h2>
|
||||
<div class="mb-5">
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Crypto Coins Heatmap</h3>
|
||||
<div class="mb-1">
|
||||
With the <i>Crypto Coins Heatmap</i> you can track the daily
|
||||
market movements of cryptocurrencies as a visual snapshot.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.tradingview.com/heatmap/crypto"
|
||||
target="_blank"
|
||||
>Crypto Coins Heatmap →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Fear & Greed Index</h3>
|
||||
<div class="mb-1">
|
||||
The fear and greed index was developed by <i>CNNMoney</i> to
|
||||
measure the primary emotions (fear and greed) that influence how
|
||||
much investors are willing to pay for stocks.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://money.cnn.com/data/fear-and-greed/"
|
||||
target="_blank"
|
||||
>Fear & Greed Index →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="mb-4 media">
|
||||
<h3 class="h5 mt-0">Inflation Chart</h3>
|
||||
<div class="mb-1">
|
||||
<i>Inflation Chart</i> helps you find the intrinsic value of stock
|
||||
markets, stock prices, goods and services by adjusting them to the
|
||||
amount of the money supply (M0, M1, M2) or price of other goods
|
||||
(food or oil).
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://inflationchart.com" target="_blank"
|
||||
>Inflation Chart →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Stock Heatmap</h3>
|
||||
<div class="mb-1">
|
||||
With the <i>Stock Heatmap</i> you can track the daily market
|
||||
movements of stocks as a visual snapshot.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.tradingview.com/heatmap/stock"
|
||||
target="_blank"
|
||||
>Stock Heatmap →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="h4 mb-3" i18n>Glossary</h2>
|
||||
<div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Buy and Hold</h3>
|
||||
<div class="mb-1">
|
||||
Buy and hold is a passive investment strategy where you buy assets
|
||||
and hold them for a long period regardless of fluctuations in the
|
||||
market.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.investopedia.com/terms/b/buyandhold.asp"
|
||||
target="_blank"
|
||||
>Buy and Hold →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Deflation</h3>
|
||||
<div class="mb-1">
|
||||
Deflation is a decrease of the general price level for goods and
|
||||
services in an economy over a period of time.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.investopedia.com/terms/d/deflation.asp"
|
||||
target="_blank"
|
||||
>Deflation →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Dollar-Cost Averaging (DCA)</h3>
|
||||
<div class="mb-1">
|
||||
Dollar-cost averaging is an investment strategy where you split
|
||||
the total amount to be invested across periodic purchases of a
|
||||
target asset to reduce the impact of volatility on the overall
|
||||
purchase.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.investopedia.com/terms/d/dollarcostaveraging.asp"
|
||||
target="_blank"
|
||||
>Dollar-Cost Averaging →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Financial Independence</h3>
|
||||
<div class="mb-1">
|
||||
Financial independence is the status of having enough income, for
|
||||
example with a passive income like dividends, to cover your living
|
||||
expenses for the rest of your life.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Financial_independence"
|
||||
target="_blank"
|
||||
>Financial Independence →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">FIRE</h3>
|
||||
<div class="mb-1">
|
||||
FIRE is a movement that promotes saving and investing to achieve
|
||||
financial independence and early retirement.
|
||||
</div>
|
||||
<div>
|
||||
<a href="../en/blog/2023/07/exploring-the-path-to-fire">FIRE →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Inflation</h3>
|
||||
<div class="mb-1">
|
||||
Inflation is an increase of the general price level for goods and
|
||||
services in an economy over a period of time.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.investopedia.com/terms/i/inflation.asp"
|
||||
target="_blank"
|
||||
>Inflation →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (hasPermissionForSubscription) {
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Personal Finance Tools</h3>
|
||||
<div class="mb-1">
|
||||
Personal finance tools are software applications that help
|
||||
individuals manage their money, track expenses, set budgets,
|
||||
monitor investments, and make informed financial decisions.
|
||||
</div>
|
||||
<div>
|
||||
<a [routerLink]="routerLinkResourcesPersonalFinanceTools"
|
||||
>Personal Finance Tools →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="mb-4 media">
|
||||
<div class="media-body">
|
||||
<h3 class="h5 mt-0">Stagflation</h3>
|
||||
<div class="mb-1">
|
||||
Stagflation describes a situation in which there is a stagnant
|
||||
economy with high unemployment and high inflation.
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.investopedia.com/terms/s/stagflation.asp"
|
||||
target="_blank"
|
||||
>Stagflation →</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
|
||||
<router-outlet></router-outlet>
|
||||
</mat-tab-nav-panel>
|
||||
|
||||
<nav
|
||||
mat-align-tabs="center"
|
||||
mat-tab-nav-bar
|
||||
[disablePagination]="true"
|
||||
[tabPanel]="tabPanel"
|
||||
>
|
||||
@for (tab of tabs; track tab) {
|
||||
@if (tab.showCondition !== false) {
|
||||
<a
|
||||
#rla="routerLinkActive"
|
||||
class="no-min-width px-3"
|
||||
mat-tab-link
|
||||
routerLinkActive
|
||||
[active]="rla.isActive"
|
||||
[routerLink]="tab.path"
|
||||
[routerLinkActiveOptions]="{ exact: true }"
|
||||
>
|
||||
<ion-icon
|
||||
[name]="tab.iconName"
|
||||
[size]="deviceType === 'mobile' ? 'large' : 'small'"
|
||||
/>
|
||||
<div class="d-none d-sm-block ml-2">{{ tab.label }}</div>
|
||||
</a>
|
||||
}
|
||||
}
|
||||
</nav>
|
||||
|
||||
@ -1,12 +1,19 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { ResourcesPageRoutingModule } from './resources-page-routing.module';
|
||||
import { ResourcesPageComponent } from './resources-page.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [ResourcesPageComponent],
|
||||
imports: [CommonModule, ResourcesPageRoutingModule],
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatTabsModule,
|
||||
ResourcesPageRoutingModule,
|
||||
RouterModule
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
export class ResourcesPageModule {}
|
||||
|
||||
Loading…
Reference in new issue