Having the need to grasp Angular, I decided to tackle this task as a learning experience by following these steps:

1. Begin by creating a new project using ng new test
2. In Angular, there are pipe-functions available but no pipe-filter, so you will have to create one. Navigate to the project directory (cd test) and execute ng generate pipe search. To discover this command, I referred to all generatable options by running ng generate --help.
3. After some exploration, I discovered that in order to utilize "ng-model," you need to include the "FormsModule" in your application. In app.module.ts, import the module using:

   import { FormsModule } from "@angular/forms";

   and update @NgModule imports with:

   ...  imports: [ BrowserModule, FormsModule ], ...

   .
4. Modify app.component.html to incorporate our template:

<div id="content">
      <input type='text' [(ngModel)]='searchText' placeholder=" Enter Query Here" />
      <ul>
        <li class="angular-with-newlines" *ngFor="let course of courses | Search:searchText">
            {{course.course_number}}: {{course.title}}
            <button (click)="course.showDesc=!course.showDesc">See More</button> 
            <div *ngIf="course.showDesc"> Description: {{course.description}} </div>
        </li>
      </ul>
    </div>

If you are familiar with how your old template functions, then these modifications should be self-explanatory. It required a bit of research, but most aspects align with AngularJS with just minor syntax changes.

5. Revamping the Controller is necessary as well. There's no longer scope; instead, simply declare a variable directly within the controller. Don't forget to include the search input model:

import { Component } from "@angular/core";
    @Component({
      selector: "app-root",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
      title = "app";
      searchText = "Math"; // Just a default value
      courses = [{ id: 1, course_number:  ...}, ...];  // Snip for readability
    }

6. Lastly, implement the search filter. This step requires more effort, especially if you aim to replicate the old filter precisely.

search.pipe.ts:

import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
  name: "Search",
  pure: false
})
export class SearchPipe implements PipeTransform {
  transform(items: any[], searchValue: string, filter: Object): any {
    return items.filter(item => {
      return item.title.indexOf(searchValue) > -1 ||
             item.course_number.indexOf(searchValue) > -1;
    });
  }
}

I opted for indexOf and es6 filter to keep it simple - focusing only on two fields and without case insensitivity. Setting pure to

false</code was necessary to ensure proper updating. This led me to consider whether a pipe is the best approach. Perhaps having a controller function triggered by model changes (with debounce) to create a results-array might be more efficient.</p>

<p><strong>Additional reminder:</strong> NgModel could be excessive since it binds a value in both directions (from controller to template and vice versa), yet we seldom alter the value (except for setting a default). Skipping ngModel and using <code>(change)="doSearch()"

might reduce complexity and make the code cleaner, albeit less modular compared to the filter.

If you want to see a live example, head over to stackblitz where I have created a working demo. Take a look at app.component.ts, app.component.html, app.module.ts, and course-filter.pipe.ts.

In Angular, there is a concept known as Pipes. Pipes take data as input and transform it into the desired output. There are some built-in pipes, but you can also create your own custom pipes. For this specific case, we need to create a custom pipe.

You can reuse most of your existing HTML code, but you'll need to replace the filter functionality with an Angular pipe.

To do this, you will need to create a pipe similar to the one below and declare it in a ngModule.

import { Pipe, PipeTransform } from '@angular/core';
import { Course } from './app.component';

@Pipe({
  name: 'courseFilter'
})
export class CourseFilter implements PipeTransform {
  transform(courses: Course[], keyword: string): Course[] {
    debugger;
    if (!keyword || keyword === '') {
      return courses;
    }
    return courses.filter((course: Course) => {
      return course.course_number.toString().includes(keyword) ||
        course.description.includes(keyword) || 
        course.keywords.includes(keyword) || 
        course.title.includes(keyword)
    });
  }
}

Make sure to include the pipe in your app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { CourseFilter } from './course-filter.pipe';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, CourseFilter ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Add FormsModule to the list of imports in the @NgModule decorator to access template-driven forms features like ngModel.

BrowserModule provides services and directives needed for an Angular2 application, such as ngIf.

Your template should look something like this:

<h1> Search Feature </h1>

<input type='text' [(ngModel)]='searchText' placeholder=" Search a Topic, Subject, or a Course!" >

<div>
    <ul>
        <li *ngFor="let course of courses | courseFilter: searchText">
       {{course.course_number}} :      {{course.title}} <br>
       <button (click)="course.showDescription = !course.showDescription">See More</button>
       <div *ngIf="course.showDescription">
         {{course.description}}
       </div>
        </li>
    </ul>
</div>