Alex Earley DevEarley

How to detect scroll event on any element in Angular.

<div (scroll)="onScroll($event)"></div>

onScroll(event): void { ... }

.NET Core WebAPI and Angular Quick Start Guide

Why Angular and .NET Core?

Angular is a well established frontend framework. With Angular, you can quickly bind input fields to logic that calls the .NET Core WebAPI backend. WebAPI is simple to set up and can host our angular app without MVC.

Installation

Download VS Code
Download .NET Core CLI for your OS.
Download Node.JS

Setup Angular CLI on MacOS

I thought it was supposed to be easy! Well it is after I did a little digging.

Install tools

Download and Install

NodeJS (8)
NVM
VS Code

Setup NodeJS

Using .Net Core and SQL to build User Authentication

(this might not work how I want, WIP)

From : https://www.c-sharpcorner.com/article/configure-sql-server-session-state-in-asp-net-core/

Project.json

"tools": {  
 "Microsoft.Extensions.Caching.SqlConfig.Tools": "1.0.0-preview2-final"

	<generic-container>
	<ng-container header>
	Header 2
	</ng-container>
	<ng-container body>
	Hello World
	</ng-container>
	<ng-container footer>
	<button>Save</button>
	</ng-container>

	namespace App
	{
	public class FileWriter
	{
	public void WriteFile(string filename, string content)
	{
	var path = "C:/Temp/" + filename;
	var file = System.IO.File.Create(path);
	var writer = new System.IO.StreamWriter(file);
	writer.WriteLine(content);

	namespace App
	{
	public class FileReader
	{
	private List<FolderModel> GetFoldersForDocs()
	{
	DirectoryInfo di = new DirectoryInfo(documentationPath);
	FileInfo[] files = RecursiveFetch(4, di.FullName);
	var trimLength = di.FullName.Count();
	var folders = files.Select(x => BuildFileModel(x, trimLength))

	import { Injectable } from '@angular/core';
	import { Router } from '@angular/router';
	import * as FileSaver from "file-saver";

	@Injectable({
	providedIn: 'root'
	})
	export class FileService {

	constructor() { }

	import { Component, OnInit } from '@angular/core';
	import { ActivatedRoute } from '@angular/router';
	import { Marked } from 'marked-ts';
	import { highlight } from 'highlight.js';

	@Component({
	selector: 'app-doc',
	template: `
	<div id="content-container" class="doc" [innerHTML]="markdownHTML" ></div>' `
	})