How to use the rxjs/operators.filter function in rxjs

ngOnInit() {
    this.isOrgRole = !this.spaceGuid;
    const users$ = this.store.select(selectUsersRolesPicked);
    // Org? Org manager. Space? Org manager or space manager
    const canEditRole$ = this.isOrgRole ?
      this.userPerms.can(CurrentUserPermissions.ORGANIZATION_CHANGE_ROLES, this.cfGuid, this.orgGuid) :
      canUpdateOrgSpaceRoles(
        this.userPerms,
        this.cfGuid,
        this.orgGuid,
        this.spaceGuid);

    this.sub = this.cfRolesService.existingRoles$.pipe(
      combineLatest(this.cfRolesService.newRoles$, users$, canEditRole$),
      filter(([existingRoles, newRoles, users, canEditRole]) => !!users.length && !!newRoles.orgGuid)
    ).subscribe(([existingRoles, newRoles, users, canEditRole]) => {
      this.orgGuid = newRoles.orgGuid;
      if (this.role) {
        console.log(existingRoles, newRoles);
        // TODO: RC existingRoles needs to have newly assigned roles... this list comes from users in a pagination section...
      }
      const { checked, tooltip } = CfRoleCheckboxComponent.getCheckedState(
        this.role, users, existingRoles, newRoles, this.orgGuid, this.spaceGuid);
      this.checked = checked;
      this.tooltip = tooltip;
      this.disabled = !canEditRole ||
        CfRoleCheckboxComponent.isDisabled(this.isOrgRole, this.role, users, existingRoles, newRoles, this.orgGuid, checked);
    });
  }

ngAfterViewInit(): void {
        let meterEl = this.meter.nativeElement;
        let container = this.container.nativeElement;
        let renderWrapper = this.renderWrapper.nativeElement;
        // for mouse event
        this._subscription.add(
            observableFromEvent(meterEl, 'mousedown').pipe(
                filter(() => {
                    return this.timestampList && this.timestampList.length > 0;
                }),
                mergeMap((event: MouseEvent) => {
                    event.preventDefault();
                    return observableFromEvent(document, 'mousemove').pipe(
                        takeUntil(observableFromEvent(document, 'mouseup')));
                }),
                map((event: MouseEvent) => {
                    return Math.max(0, Math.min(event.clientY - renderWrapper.getBoundingClientRect().top, this.availableHeight));
                }),)
                .subscribe((pos: number) => {
                    this.scrollTo(pos);
                })
        );

        // for click

constructor(
    private store: Store,
    private http: HttpClient,
    private snackBar: MatSnackBar,
    cfEndpointService: CloudFoundryEndpointService,
    private currentUserPermissionsService: CurrentUserPermissionsService,
    private activeRouteCfOrgSpace: ActiveRouteCfOrgSpace,
    private confirmDialog: ConfirmationDialogService,
  ) {
    this.configured$ = cfEndpointService.endpoint$.pipe(
      filter(v => !!v && !!v.entity),
      // Note - metadata could be falsy if smtp server not configured/other metadata properties are missing
      map(v => v.entity.metadata && v.entity.metadata.userInviteAllowed === 'true')
    );

    this.canConfigure$ = combineLatest(
      waitForCFPermissions(this.store, this.activeRouteCfOrgSpace.cfGuid),
      this.store.select('auth')
    ).pipe(
      map(([cf, auth]) =>
        cf.global.isAdmin &&
        auth.sessionData['plugin-config'] && auth.sessionData['plugin-config'].userInvitationsEnabled === 'true')
    );
  }

ngAfterViewInit() {
        merge(
            of(this.includeInCommandLine.length),
            this.includeInCommandLine.changes.pipe(
                map(l => l.length)
            )
        ).pipe(
            distinctUntilChanged(),
            filter(a => !!a)
        ).subscribeTracked(this, () => {
            this.addIncludeInCommandLineToggleDecorator();
        });
    }
}

private setDeployedCommitDetails() {
    this.store.select(
      selectEntity>(githubCommitSchemaKey, this.projectName + '-' + this.deployedCommitSha))
      .pipe(
        filter(deployedCommit => !!deployedCommit),
        first(),
        map(deployedCommit => deployedCommit.entity)
      ).subscribe(deployedCommit => {
        this.deployedCommit = deployedCommit;
        this.deployedTime = moment(this.deployedCommit.commit.author.date).unix();
      });
  }

public requestReply(message: HostMessage): Promise {
    const replyToUid = UUID.randomUUID();

    const reply$ = this._messageBus.receiveReplyMessagesForApplication$(this.symbolicName)
      .pipe(
        filter(env => env.replyToUid === replyToUid),
        first(),
        takeUntil(this._destroy$),
        map(env => env.message),
      );

    const request: MessageEnvelope = {
      protocol: PROTOCOL,
      channel: 'host',
      sender: this.symbolicName,
      replyToUid: replyToUid,
      message: message,
    };
    this._site.postMessage(request);

    return reply$.toPromise();
  }

exhaustMap(() => {
              return this.store.select(state => state.user).pipe(
                pairwise(),
                filter(([prevUser, user]) => !!user.token && prevUser.token !== user.token),
                take(1));
            })
          );

constructor(public store: Sentence,
                parent: TextBlock) {
        super(parent);
        this.store.destructed$.pipe(first())
            .subscribe(() => this.destructor());
        this.storeTextChangedSubscription = this.store.textChanged$
            .subscribe(() => this.rerender());
        Store.labelAdded$.pipe(
            filter((label: Label) => {
                return this.store.globalStartIndex <= label.startIndex && label.endIndex <= this.store.globalEndIndex;
            }),
            filter((label: Label) => {
                for (let softline of this.children) {
                    if (softline.globalStartIndex <= label.startIndex && label.endIndex <= softline.globalEndIndex) {
                        return false;
                    }
                }
                return true;
            })).subscribe(() => this.rerender());
    }

function createBufferedDocument(documentId, serverEvents$, doCommit) {
  const bufferedDocument = createObservableBufferedDocument(serverEvents$, doCommit)

  const reconnects$ = serverEvents$.pipe(filter(event => event.type === 'reconnect'))

  return {
    events: merge(reconnects$, bufferedDocument.updates$),
    patch(patches) {
      bufferedDocument.addMutations(patches.map(patch => ({patch: {...patch, id: documentId}})))
    },
    create(document) {
      bufferedDocument.addMutation({
        create: Object.assign({id: documentId}, document)
      })
    },
    createIfNotExists(document) {
      bufferedDocument.addMutation({createIfNotExists: document})
    },
    createOrReplace(document) {
      bufferedDocument.addMutation({createOrReplace: document})

filterUsersByRoles(user: IdentityUserModel): Observable {
        return this.identityUserService.checkUserHasRole(user.id, this.roles).pipe(
            map((hasRole: boolean) => ({ hasRole: hasRole, user: user })),
            filter((filteredUser: { hasRole: boolean, user: IdentityUserModel }) => filteredUser.hasRole),
            map((filteredUser: { hasRole: boolean, user: IdentityUserModel }) => filteredUser.user));
    }